<!DOCTYPE html>
<!-- saved from url=(0016)http://localhost -->
<html>
  <head>
    <meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <title>组件化开发</title>
    <style>
        body{
            margin: 0;
        }
        #content-info{
            width: auto;
            margin: 0 auto;
            text-align: center;
        }
        #author-info{
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        #title{
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            padding-top: 10px;
            margin-bottom: 2px;
            font-size: 34px;
            color: #505050;
        }
        .text{
            white-space:nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            margin-right: 20px;
            margin-bottom: 2px;
            font-size: 20px;
            color: #8c8c8c;
        }
        #navBar{
            width: auto;
            height: auto;
            position: fixed;
            right:0;
            bottom: 0;
            background-color: #f0f3f4;
            overflow-y: auto;
            text-align: center;
        }
        #svg-container{
            width: 100%;
            overflow-x: scroll;
            min-width: 0px;
            margin: 0 10px;
            overflow: visible;
            position: relative;
        }
        #nav-thumbs{
            overflow-y: scroll;
            padding: 0 5px;
        }
        .nav-thumb{
            position: relative;
            margin: 10px auto;
        }
        .nav-thumb >p{
            text-align: center;
            font-size: 12px;
            margin: 4px 0 0 0;
        }
        .nav-thumb >div{
            position: relative;
            display: inline-block;
            border: 1px solid #c6cfd5;
        }
        .nav-thumb img{
            display: block;
        }
        #main-content{
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #d0cfd8;
            display: flex;
            height: auto;
            flex-flow: row wrap;
            text-align:center;
        }
        #svg-container >svg{
            overflow: visible;
            display: block;
            margin:5px auto;
            margin-bottom: 5px;
        }
        #copyright{
            bottom: 0;
            left: 50%;
            margin: 5px auto;
            font-size: 16px;
            color: #515151;
        }
        #copyright >a{
            text-decoration: none;
            color: #77C;
        }
        .number{
            position: absolute;
            top:0;
            left:0;
            border-top:22px solid #08a1ef;
            border-right: 22px solid transparent;
        }
        .pagenum{
            font-size: 12px;
            color: #fff;
            position: absolute;
            top: -23px;
            left: 2px;
        }
            #navBar::-webkit-scrollbar{
            width: 8px;
            background-color: #f5f5f5;
        }
            #navBar::-webkit-scrollbar-track{
            -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3);
            border-radius: 8px;
            background-color: #fff;
        }
            #navBar::-webkit-scrollbar-thumb{
            border-radius: 8px;
            -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3);
            background-color: #6b6b70;
        }
        #navBar::-webkit-scrollbar-thumb:hover{
            background-color: #4a4a4f;
        }
</style>
  </head>
  <body>
    <div id="main-area">
      <div id="content-info">
        <div id="content-info">
          <div id="title">组件化开发</div>
        </div>
      </div>
      <div id="main-content">
        <div id="svg-container"><svg height="10040" xmlns="http://www.w3.org/2000/svg" ed:name="页面-1" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:ed="https://www.edrawsoft.cn/xml/2017/SVGExtensions/" viewBox="0 0 1977 10040" id="page0" ed:vSpacing="30" preserveAspectRadio="xMinYMin meet" xmlns:xlink="http://www.w3.org/1999/xlink" ed:hSpacing="30" width="1977">
    <style type="text/css"><![CDATA[
g[ed\:togtopicid],g[ed\:hyperlink],g[ed\:comment],g[ed\:note] {cursor:pointer;}
g[id] {-moz-user-select: none;-ms-user-select: none;user-select: none;}
svg text::selection,svg tspan::selection{background-color: #4285f4;color: #ffffff;fill: #ffffff;}
.st3 {fill:#303030;font-family:微软雅黑;font-size:10pt}
.st2 {fill:#435fbc;font-family:微软雅黑;font-size:14pt;font-weight:bold}
.st4 {fill:#ebebeb;font-family:微软雅黑;font-size:12pt;font-weight:bold}
.st1 {fill:#ffffff;font-family:微软雅黑;font-size:18pt;font-weight:bold}
]]></style>
    <defs/>
    <rect x="0" height="10040" y="0" width="1977" fill="#ffffff"/>
    <path d="M-25.2,-27L-25.2,26.9L25.2,26.9" transform="matrix(1,0,0,1,129.2,109.95)" ed:tosuperid="102" stroke-linejoin="round" stroke="#303030" id="103" stroke-linecap="round" stroke-width="2" ed:parentid="101" fill="none"/>
    <path d="M-25.2,-2611.4L-25.2,2611.4L25.2,2611.4" transform="matrix(1,0,0,1,129.2,2694.4)" ed:tosuperid="104" stroke-linejoin="round" stroke="#303030" id="105" stroke-linecap="round" stroke-width="2" ed:parentid="101" fill="none"/>
    <path d="M-25.2,-4603.1L-25.2,4603.1L25.2,4603.1" transform="matrix(1,0,0,1,129.2,4686.1)" ed:tosuperid="106" stroke-linejoin="round" stroke="#303030" id="107" stroke-linecap="round" stroke-width="2" ed:parentid="101" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,206.22,168.77)" ed:tosuperid="108" stroke-linejoin="round" stroke="#303030" id="109" stroke-linecap="round" ed:parentid="102" fill="none"/>
    <path d="M-9.5,-284.2L-9.5,278.2C-9.5,281.5,-6.8,284.2,-3.5,284.2L9.5,284.2" transform="matrix(1,0,0,1,206.22,441.97)" ed:tosuperid="110" stroke-linejoin="round" stroke="#303030" id="111" stroke-linecap="round" ed:parentid="102" fill="none"/>
    <path d="M-9.5,-1039.5L-9.5,1033.4C-9.5,1036.8,-6.8,1039.4,-3.5,1039.4L9.5,1039.4" transform="matrix(1,0,0,1,206.22,1197.25)" ed:tosuperid="112" stroke-linejoin="round" stroke="#303030" id="113" stroke-linecap="round" ed:parentid="102" fill="none"/>
    <path d="M-9.5,-1488.8L-9.5,1482.8C-9.5,1486.1,-6.8,1488.8,-3.5,1488.8L9.5,1488.8" transform="matrix(1,0,0,1,206.22,1646.57)" ed:tosuperid="114" stroke-linejoin="round" stroke="#303030" id="115" stroke-linecap="round" ed:parentid="102" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,250.52,202.92)" ed:tosuperid="116" stroke-linejoin="round" stroke="#303030" id="117" stroke-linecap="round" ed:parentid="108" fill="none"/>
    <path d="M-9.5,-79.3L-9.5,73.3C-9.5,76.6,-6.8,79.3,-3.5,79.3L9.5,79.3" transform="matrix(1,0,0,1,250.52,271.22)" ed:tosuperid="118" stroke-linejoin="round" stroke="#303030" id="119" stroke-linecap="round" ed:parentid="108" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,250.52,237.07)" ed:tosuperid="120" stroke-linejoin="round" stroke="#303030" id="121" stroke-linecap="round" ed:parentid="108" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,308.43,237.07)" ed:tosuperid="122" stroke-linejoin="round" stroke="#303030" id="123" stroke-linecap="round" ed:parentid="116" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,308.43,373.67)" ed:tosuperid="124" stroke-linejoin="round" stroke="#303030" id="125" stroke-linecap="round" ed:parentid="118" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,522.73,407.82)" ed:tosuperid="126" stroke-linejoin="round" stroke="#303030" id="127" stroke-linecap="round" ed:parentid="124" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,308.43,407.82)" ed:tosuperid="128" stroke-linejoin="round" stroke="#303030" id="129" stroke-linecap="round" ed:parentid="118" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,517.53,476.13)" ed:tosuperid="130" stroke-linejoin="round" stroke="#303030" id="131" stroke-linecap="round" ed:parentid="128" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,517.53,493.2)" ed:tosuperid="132" stroke-linejoin="round" stroke="#303030" id="133" stroke-linecap="round" ed:parentid="128" fill="none"/>
    <path d="M-9.5,-96.3L-9.5,90.4C-9.5,93.7,-6.8,96.4,-3.5,96.4L9.5,96.4" transform="matrix(1,0,0,1,308.43,459.05)" ed:tosuperid="134" stroke-linejoin="round" stroke="#303030" id="135" stroke-linecap="round" ed:parentid="118" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,381.93,578.57)" ed:tosuperid="136" stroke-linejoin="round" stroke="#303030" id="137" stroke-linecap="round" ed:parentid="134" fill="none"/>
    <path d="M-9.5,-130.5L-9.5,124.5C-9.5,127.8,-6.8,130.5,-3.5,130.5L9.5,130.5" transform="matrix(1,0,0,1,308.43,493.2)" ed:tosuperid="138" stroke-linejoin="round" stroke="#303030" id="139" stroke-linecap="round" ed:parentid="118" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,366.73,646.88)" ed:tosuperid="140" stroke-linejoin="round" stroke="#303030" id="141" stroke-linecap="round" ed:parentid="138" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,540.63,681.03)" ed:tosuperid="142" stroke-linejoin="round" stroke="#303030" id="143" stroke-linecap="round" ed:parentid="140" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,250.52,749.32)" ed:tosuperid="144" stroke-linejoin="round" stroke="#303030" id="145" stroke-linecap="round" ed:parentid="110" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,349.23,783.47)" ed:tosuperid="146" stroke-linejoin="round" stroke="#303030" id="147" stroke-linecap="round" ed:parentid="144" fill="none"/>
    <path d="M-9.5,-525.9L-9.5,519.9C-9.5,523.2,-6.8,525.9,-3.5,525.9L9.5,525.9" transform="matrix(1,0,0,1,349.23,1298.38)" ed:tosuperid="148" stroke-linejoin="round" stroke="#303030" id="149" stroke-linecap="round" ed:parentid="144" fill="none"/>
    <path d="M-9.5,-560L-9.5,554C-9.5,557.3,-6.8,560,-3.5,560L9.5,560" transform="matrix(1,0,0,1,349.23,1332.53)" ed:tosuperid="150" stroke-linejoin="round" stroke="#303030" id="151" stroke-linecap="round" ed:parentid="144" fill="none"/>
    <path d="M-9.5,-663.8L-9.5,657.8C-9.5,661.1,-6.8,663.8,-3.5,663.8L9.5,663.8" transform="matrix(1,0,0,1,349.23,1436.3)" ed:tosuperid="152" stroke-linejoin="round" stroke="#303030" id="153" stroke-linecap="round" ed:parentid="144" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,400.33,817.63)" ed:tosuperid="154" stroke-linejoin="round" stroke="#303030" id="155" stroke-linecap="round" ed:parentid="146" fill="none"/>
    <path d="M-9.5,-232.9L-9.5,227C-9.5,230.3,-6.8,233,-3.5,233L9.5,233" transform="matrix(1,0,0,1,400.33,1039.6)" ed:tosuperid="156" stroke-linejoin="round" stroke="#303030" id="157" stroke-linecap="round" ed:parentid="146" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,471.83,1295.72)" ed:tosuperid="158" stroke-linejoin="round" stroke="#303030" id="159" stroke-linecap="round" ed:parentid="156" fill="none"/>
    <path d="M-9.5,-335.4L-9.5,329.4C-9.5,332.7,-6.8,335.4,-3.5,335.4L9.5,335.4" transform="matrix(1,0,0,1,400.33,1142.05)" ed:tosuperid="160" stroke-linejoin="round" stroke="#303030" id="161" stroke-linecap="round" ed:parentid="146" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,471.83,1329.88)" ed:tosuperid="162" stroke-linejoin="round" stroke="#303030" id="163" stroke-linecap="round" ed:parentid="156" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,543.34,1329.88)" ed:tosuperid="164" stroke-linejoin="round" stroke="#303030" id="165" stroke-linecap="round" ed:parentid="158" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,543.34,1398.18)" ed:tosuperid="166" stroke-linejoin="round" stroke="#303030" id="167" stroke-linecap="round" ed:parentid="162" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,543.34,1415.25)" ed:tosuperid="168" stroke-linejoin="round" stroke="#303030" id="169" stroke-linecap="round" ed:parentid="162" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,645.83,851.78)" ed:tosuperid="170" stroke-linejoin="round" stroke="#303030" id="171" stroke-linecap="round" ed:parentid="154" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,703.74,885.93)" ed:tosuperid="173" stroke-linejoin="round" stroke="#303030" id="174" stroke-linecap="round" ed:parentid="170" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,601.03,1500.62)" ed:tosuperid="175" stroke-linejoin="round" stroke="#303030" id="176" stroke-linecap="round" ed:parentid="160" fill="none"/>
    <path d="M-9.5,-28.1L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,601.03,1517.7)" ed:tosuperid="177" stroke-linejoin="round" stroke="#303030" id="178" stroke-linecap="round" ed:parentid="160" fill="none"/>
    <path d="M-9.5,-49.7L-9.5,43.7C-9.5,47,-6.8,49.7,-3.5,49.7L9.5,49.7" transform="matrix(1,0,0,1,601.03,1539.38)" ed:tosuperid="179" stroke-linejoin="round" stroke="#303030" id="180" stroke-linecap="round" ed:parentid="160" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,645.83,885.93)" ed:tosuperid="181" stroke-linejoin="round" stroke="#303030" id="182" stroke-linecap="round" ed:parentid="154" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,736.14,954.23)" ed:tosuperid="183" stroke-linejoin="round" stroke="#303030" id="184" stroke-linecap="round" ed:parentid="181" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,736.14,971.3)" ed:tosuperid="185" stroke-linejoin="round" stroke="#303030" id="186" stroke-linecap="round" ed:parentid="181" fill="none"/>
    <path d="M-9.5,-96.3L-9.5,90.4C-9.5,93.7,-6.8,96.4,-3.5,96.4L9.5,96.4" transform="matrix(1,0,0,1,645.83,937.15)" ed:tosuperid="187" stroke-linejoin="round" stroke="#303030" id="188" stroke-linecap="round" ed:parentid="154" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,737.74,1056.68)" ed:tosuperid="189" stroke-linejoin="round" stroke="#303030" id="190" stroke-linecap="round" ed:parentid="187" fill="none"/>
    <path d="M-9.5,-28.1L-9.5,22C-9.5,25.4,-6.8,28,-3.5,28L9.5,28" transform="matrix(1,0,0,1,737.74,1073.75)" ed:tosuperid="193" stroke-linejoin="round" stroke="#303030" id="194" stroke-linecap="round" ed:parentid="187" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,737.74,1090.83)" ed:tosuperid="195" stroke-linejoin="round" stroke="#303030" id="196" stroke-linecap="round" ed:parentid="187" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,894.04,1159.13)" ed:tosuperid="197" stroke-linejoin="round" stroke="#303030" id="198" stroke-linecap="round" ed:parentid="195" fill="none"/>
    <path d="M-9.5,-28.1L-9.5,22C-9.5,25.4,-6.8,28,-3.5,28L9.5,28" transform="matrix(1,0,0,1,894.04,1176.2)" ed:tosuperid="199" stroke-linejoin="round" stroke="#303030" id="200" stroke-linecap="round" ed:parentid="195" fill="none"/>
    <path d="M-9.5,-198.8L-9.5,192.8C-9.5,196.1,-6.8,198.8,-3.5,198.8L9.5,198.8" transform="matrix(1,0,0,1,645.83,1039.6)" ed:tosuperid="201" stroke-linejoin="round" stroke="#303030" id="202" stroke-linecap="round" ed:parentid="154" fill="none"/>
    <path d="M-9.5,-76L-9.5,70C-9.5,73.3,-6.8,76,-3.5,76L9.5,76" transform="matrix(1,0,0,1,601.03,1565.65)" ed:tosuperid="250" stroke-linejoin="round" stroke="#303030" id="251" stroke-linecap="round" ed:parentid="160" fill="none"/>
    <path d="M-9.5,-97.7L-9.5,91.7C-9.5,95,-6.8,97.7,-3.5,97.7L9.5,97.7" transform="matrix(1,0,0,1,601.03,1587.32)" ed:tosuperid="252" stroke-linejoin="round" stroke="#303030" id="253" stroke-linecap="round" ed:parentid="160" fill="none"/>
    <path d="M-9.5,-20.2L-9.5,14.2C-9.5,17.5,-6.8,20.2,-3.5,20.2L9.5,20.2" transform="matrix(1,0,0,1,865.34,1717.38)" ed:tosuperid="254" stroke-linejoin="round" stroke="#303030" id="255" stroke-linecap="round" ed:parentid="252" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.4,11" transform="matrix(1,0,0,1,1134.49,1779.13)" ed:tosuperid="256" stroke-linejoin="round" stroke="#303030" id="257" stroke-linecap="round" ed:parentid="254" fill="none"/>
    <path d="M-9.5,-603.4L-9.5,597.4C-9.5,600.7,-6.8,603.4,-3.5,603.4L9.5,603.4" transform="matrix(1,0,0,1,349.23,1375.88)" ed:tosuperid="258" stroke-linejoin="round" stroke="#303030" id="259" stroke-linecap="round" ed:parentid="144" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,407.13,1920.32)" ed:tosuperid="260" stroke-linejoin="round" stroke="#303030" id="261" stroke-linecap="round" ed:parentid="150" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,409.53,2007.02)" ed:tosuperid="262" stroke-linejoin="round" stroke="#303030" id="263" stroke-linecap="round" ed:parentid="258" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,694.86,2054.97)" ed:tosuperid="264" stroke-linejoin="round" stroke="#303030" id="265" stroke-linecap="round" ed:parentid="262" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,434.33,2123.27)" ed:tosuperid="266" stroke-linejoin="round" stroke="#303030" id="267" stroke-linecap="round" ed:parentid="152" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,434.33,2157.42)" ed:tosuperid="268" stroke-linejoin="round" stroke="#303030" id="269" stroke-linecap="round" ed:parentid="152" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,581.43,2157.42)" ed:tosuperid="270" stroke-linejoin="round" stroke="#303030" id="271" stroke-linecap="round" ed:parentid="266" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,250.52,2259.87)" ed:tosuperid="272" stroke-linejoin="round" stroke="#303030" id="273" stroke-linecap="round" ed:parentid="112" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,378.43,2294.02)" ed:tosuperid="274" stroke-linejoin="round" stroke="#303030" id="275" stroke-linecap="round" ed:parentid="272" fill="none"/>
    <path d="M-9.5,-89.8L-9.5,83.8C-9.5,87.1,-6.8,89.8,-3.5,89.8L9.5,89.8" transform="matrix(1,0,0,1,378.43,2372.85)" ed:tosuperid="276" stroke-linejoin="round" stroke="#303030" id="277" stroke-linecap="round" ed:parentid="272" fill="none"/>
    <path d="M-9.5,-151.6L-9.5,145.6C-9.5,148.9,-6.8,151.6,-3.5,151.6L9.5,151.6" transform="matrix(1,0,0,1,378.43,2434.6)" ed:tosuperid="278" stroke-linejoin="round" stroke="#303030" id="279" stroke-linecap="round" ed:parentid="272" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,436.33,2332.77)" ed:tosuperid="280" stroke-linejoin="round" stroke="#303030" id="281" stroke-linecap="round" ed:parentid="274" fill="none"/>
    <path d="M-9.5,-46.4L-9.5,40.5C-9.5,43.8,-6.8,46.5,-3.5,46.5L9.5,46.5" transform="matrix(1,0,0,1,436.33,2363.65)" ed:tosuperid="282" stroke-linejoin="round" stroke="#303030" id="283" stroke-linecap="round" ed:parentid="274" fill="none"/>
    <path d="M-9.5,-24.8L-9.5,18.8C-9.5,22.1,-6.8,24.8,-3.5,24.8L9.5,24.8" transform="matrix(1,0,0,1,436.33,2499.62)" ed:tosuperid="284" stroke-linejoin="round" stroke="#303030" id="285" stroke-linecap="round" ed:parentid="276" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,531.53,2613.92)" ed:tosuperid="286" stroke-linejoin="round" stroke="#303030" id="287" stroke-linecap="round" ed:parentid="278" fill="none"/>
    <path d="M-9.5,-55.7L-9.5,49.7C-9.5,53,-6.8,55.7,-3.5,55.7L9.5,55.7" transform="matrix(1,0,0,1,816.86,2706.55)" ed:tosuperid="288" stroke-linejoin="round" stroke="#303030" id="289" stroke-linecap="round" ed:parentid="286" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,816.86,2666.48)" ed:tosuperid="290" stroke-linejoin="round" stroke="#303030" id="291" stroke-linecap="round" ed:parentid="286" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,1122.06,2826.78)" ed:tosuperid="296" stroke-linejoin="round" stroke="#303030" id="297" stroke-linecap="round" ed:parentid="288" fill="none"/>
    <path d="M-9.5,-60.3L-9.5,54.3C-9.5,57.6,-6.8,60.3,-3.5,60.3L9.5,60.3" transform="matrix(1,0,0,1,1122.06,2871.45)" ed:tosuperid="298" stroke-linejoin="round" stroke="#303030" id="299" stroke-linecap="round" ed:parentid="288" fill="none"/>
    <path d="M-9.5,-109.5L-9.5,103.5C-9.5,106.8,-6.8,109.5,-3.5,109.5L9.4,109.5" transform="matrix(1,0,0,1,1122.06,2920.73)" ed:tosuperid="300" stroke-linejoin="round" stroke="#303030" id="301" stroke-linecap="round" ed:parentid="288" fill="none"/>
    <path d="M-9.4,-15.6L-9.4,9.6C-9.4,12.9,-6.8,15.6,-3.4,15.6L9.5,15.6" transform="matrix(1,0,0,1,1414.01,3076.43)" ed:tosuperid="308" stroke-linejoin="round" stroke="#303030" id="309" stroke-linecap="round" ed:parentid="300" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,264.12,3158.52)" ed:tosuperid="310" stroke-linejoin="round" stroke="#303030" id="311" stroke-linecap="round" ed:parentid="114" fill="none"/>
    <path d="M-9.5,-62.2L-9.5,56.2C-9.5,59.5,-6.8,62.2,-3.5,62.2L9.5,62.2" transform="matrix(1,0,0,1,264.12,3209.75)" ed:tosuperid="312" stroke-linejoin="round" stroke="#303030" id="313" stroke-linecap="round" ed:parentid="114" fill="none"/>
    <path d="M-9.5,-243.5L-9.5,237.5C-9.5,240.8,-6.8,243.5,-3.5,243.5L9.5,243.5" transform="matrix(1,0,0,1,264.12,3391.02)" ed:tosuperid="314" stroke-linejoin="round" stroke="#303030" id="315" stroke-linecap="round" ed:parentid="114" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,376.43,3192.67)" ed:tosuperid="316" stroke-linejoin="round" stroke="#303030" id="317" stroke-linecap="round" ed:parentid="310" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,573.13,3226.82)" ed:tosuperid="318" stroke-linejoin="round" stroke="#303030" id="319" stroke-linecap="round" ed:parentid="316" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,508.83,3299.72)" ed:tosuperid="320" stroke-linejoin="round" stroke="#303030" id="321" stroke-linecap="round" ed:parentid="312" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,794.15,3347.67)" ed:tosuperid="322" stroke-linejoin="round" stroke="#303030" id="323" stroke-linecap="round" ed:parentid="320" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,916.86,3381.82)" ed:tosuperid="324" stroke-linejoin="round" stroke="#303030" id="325" stroke-linecap="round" ed:parentid="322" fill="none"/>
    <path d="M-9.5,-54.3L-9.5,48.3C-9.5,51.6,-6.8,54.3,-3.5,54.3L9.5,54.3" transform="matrix(1,0,0,1,916.86,3425.17)" ed:tosuperid="326" stroke-linejoin="round" stroke="#303030" id="327" stroke-linecap="round" ed:parentid="322" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,974.76,3420.57)" ed:tosuperid="328" stroke-linejoin="round" stroke="#303030" id="329" stroke-linecap="round" ed:parentid="324" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,974.76,3502.67)" ed:tosuperid="330" stroke-linejoin="round" stroke="#303030" id="331" stroke-linecap="round" ed:parentid="326" fill="none"/>
    <path d="M-9.5,-105.5L-9.5,99.5C-9.5,102.9,-6.8,105.5,-3.5,105.5L9.5,105.5" transform="matrix(1,0,0,1,794.15,3442.25)" ed:tosuperid="332" stroke-linejoin="round" stroke="#303030" id="333" stroke-linecap="round" ed:parentid="320" fill="none"/>
    <path d="M-9.5,-127.2L-9.5,121.2C-9.5,124.5,-6.8,127.2,-3.5,127.2L9.5,127.2" transform="matrix(1,0,0,1,794.15,3463.92)" ed:tosuperid="334" stroke-linejoin="round" stroke="#303030" id="335" stroke-linecap="round" ed:parentid="320" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,514.03,3657.67)" ed:tosuperid="336" stroke-linejoin="round" stroke="#303030" id="337" stroke-linecap="round" ed:parentid="314" fill="none"/>
    <path d="M-9.5,-465.4L-9.5,459.4C-9.5,462.8,-6.8,465.4,-3.5,465.4L9.5,465.4" transform="matrix(1,0,0,1,514.03,4112.15)" ed:tosuperid="338" stroke-linejoin="round" stroke="#303030" id="339" stroke-linecap="round" ed:parentid="314" fill="none"/>
    <path d="M-9.5,-684.9L-9.5,678.8C-9.5,682.2,-6.8,684.8,-3.5,684.8L9.5,684.8" transform="matrix(1,0,0,1,514.03,4331.55)" ed:tosuperid="340" stroke-linejoin="round" stroke="#303030" id="341" stroke-linecap="round" ed:parentid="314" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,615.93,3691.82)" ed:tosuperid="342" stroke-linejoin="round" stroke="#303030" id="343" stroke-linecap="round" ed:parentid="336" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,615.93,3708.9)" ed:tosuperid="344" stroke-linejoin="round" stroke="#303030" id="345" stroke-linecap="round" ed:parentid="336" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,680.63,3760.12)" ed:tosuperid="346" stroke-linejoin="round" stroke="#303030" id="347" stroke-linecap="round" ed:parentid="344" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,680.63,3777.2)" ed:tosuperid="348" stroke-linejoin="round" stroke="#303030" id="349" stroke-linecap="round" ed:parentid="344" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,680.63,3794.27)" ed:tosuperid="350" stroke-linejoin="round" stroke="#303030" id="351" stroke-linecap="round" ed:parentid="344" fill="none"/>
    <path d="M-9.5,-62.2L-9.5,56.2C-9.5,59.5,-6.8,62.2,-3.5,62.2L9.5,62.2" transform="matrix(1,0,0,1,680.63,3811.35)" ed:tosuperid="360" stroke-linejoin="round" stroke="#303030" id="361" stroke-linecap="round" ed:parentid="344" fill="none"/>
    <path d="M-9.5,-113.4L-9.5,107.4C-9.5,110.7,-6.8,113.4,-3.5,113.4L9.5,113.4" transform="matrix(1,0,0,1,615.93,3794.27)" ed:tosuperid="362" stroke-linejoin="round" stroke="#303030" id="363" stroke-linecap="round" ed:parentid="336" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,731.83,3930.87)" ed:tosuperid="364" stroke-linejoin="round" stroke="#303030" id="365" stroke-linecap="round" ed:parentid="362" fill="none"/>
    <path d="M-9.5,-79.3L-9.5,73.3C-9.5,76.6,-6.8,79.3,-3.5,79.3L9.5,79.3" transform="matrix(1,0,0,1,731.83,3999.17)" ed:tosuperid="366" stroke-linejoin="round" stroke="#303030" id="367" stroke-linecap="round" ed:parentid="362" fill="none"/>
    <path d="M-9.5,-147.6L-9.5,141.6C-9.5,144.9,-6.8,147.6,-3.5,147.6L9.5,147.6" transform="matrix(1,0,0,1,731.83,4067.47)" ed:tosuperid="368" stroke-linejoin="round" stroke="#303030" id="369" stroke-linecap="round" ed:parentid="362" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,776.14,3965.02)" ed:tosuperid="376" stroke-linejoin="round" stroke="#303030" id="377" stroke-linecap="round" ed:parentid="364" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,776.14,3982.1)" ed:tosuperid="378" stroke-linejoin="round" stroke="#303030" id="379" stroke-linecap="round" ed:parentid="364" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,776.14,3999.17)" ed:tosuperid="380" stroke-linejoin="round" stroke="#303030" id="381" stroke-linecap="round" ed:parentid="364" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,776.14,4101.62)" ed:tosuperid="382" stroke-linejoin="round" stroke="#303030" id="383" stroke-linecap="round" ed:parentid="366" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,776.14,4118.7)" ed:tosuperid="384" stroke-linejoin="round" stroke="#303030" id="385" stroke-linecap="round" ed:parentid="366" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,776.14,4135.77)" ed:tosuperid="386" stroke-linejoin="round" stroke="#303030" id="387" stroke-linecap="round" ed:parentid="366" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,789.74,4238.22)" ed:tosuperid="390" stroke-linejoin="round" stroke="#303030" id="391" stroke-linecap="round" ed:parentid="368" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,789.74,4255.3)" ed:tosuperid="392" stroke-linejoin="round" stroke="#303030" id="393" stroke-linecap="round" ed:parentid="368" fill="none"/>
    <path d="M-9.5,-49.7L-9.5,43.7C-9.5,47,-6.8,49.7,-3.5,49.7L9.5,49.7" transform="matrix(1,0,0,1,789.74,4276.97)" ed:tosuperid="394" stroke-linejoin="round" stroke="#303030" id="395" stroke-linecap="round" ed:parentid="368" fill="none"/>
    <path d="M-9.5,-366.3L-9.5,360.3C-9.5,363.6,-6.8,366.3,-3.5,366.3L9.5,366.3" transform="matrix(1,0,0,1,615.93,4047.12)" ed:tosuperid="396" stroke-linejoin="round" stroke="#303030" id="397" stroke-linecap="round" ed:parentid="336" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,901.26,4450.37)" ed:tosuperid="398" stroke-linejoin="round" stroke="#303030" id="399" stroke-linecap="round" ed:parentid="396" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,1044.67,4359.07)" ed:tosuperid="400" stroke-linejoin="round" stroke="#303030" id="401" stroke-linecap="round" ed:parentid="394" fill="none"/>
    <path d="M-9.5,-414.2L-9.5,408.2C-9.5,411.5,-6.8,414.2,-3.5,414.2L9.5,414.2" transform="matrix(1,0,0,1,615.93,4095.07)" ed:tosuperid="402" stroke-linejoin="round" stroke="#303030" id="403" stroke-linecap="round" ed:parentid="336" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,750.63,4532.47)" ed:tosuperid="404" stroke-linejoin="round" stroke="#303030" id="405" stroke-linecap="round" ed:parentid="402" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,748.73,4600.77)" ed:tosuperid="406" stroke-linejoin="round" stroke="#303030" id="407" stroke-linecap="round" ed:parentid="338" fill="none"/>
    <path d="M-9.5,-72.7L-9.5,66.7C-9.5,70,-6.8,72.7,-3.5,72.7L9.5,72.7" transform="matrix(1,0,0,1,748.73,4662.52)" ed:tosuperid="408" stroke-linejoin="round" stroke="#303030" id="409" stroke-linecap="round" ed:parentid="338" fill="none"/>
    <path d="M-9.5,-24.8L-9.5,18.8C-9.5,22.1,-6.8,24.8,-3.5,24.8L9.5,24.8" transform="matrix(1,0,0,1,806.63,4648.72)" ed:tosuperid="410" stroke-linejoin="round" stroke="#303030" id="411" stroke-linecap="round" ed:parentid="406" fill="none"/>
    <path d="M-9.5,-20.2L-9.5,14.2C-9.5,17.5,-6.8,20.2,-3.5,20.2L9.5,20.2" transform="matrix(1,0,0,1,820.23,4767.62)" ed:tosuperid="414" stroke-linejoin="round" stroke="#303030" id="415" stroke-linecap="round" ed:parentid="408" fill="none"/>
    <path d="M-9.5,-129.9L-9.5,123.9C-9.5,127.2,-6.8,129.9,-3.5,129.9L9.5,129.9" transform="matrix(1,0,0,1,748.73,4719.67)" ed:tosuperid="420" stroke-linejoin="round" stroke="#303030" id="421" stroke-linecap="round" ed:parentid="338" fill="none"/>
    <path d="M-9.5,-151.6L-9.5,145.6C-9.5,148.9,-6.8,151.6,-3.5,151.6L9.5,151.6" transform="matrix(1,0,0,1,748.73,4741.35)" ed:tosuperid="423" stroke-linejoin="round" stroke="#303030" id="424" stroke-linecap="round" ed:parentid="338" fill="none"/>
    <path d="M-9.5,-24.8L-9.5,18.8C-9.5,22.1,-6.8,24.8,-3.5,24.8L9.5,24.8" transform="matrix(1,0,0,1,895.03,4929.87)" ed:tosuperid="425" stroke-linejoin="round" stroke="#303030" id="426" stroke-linecap="round" ed:parentid="423" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,692.73,5039.57)" ed:tosuperid="429" stroke-linejoin="round" stroke="#303030" id="430" stroke-linecap="round" ed:parentid="340" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,692.73,5073.72)" ed:tosuperid="431" stroke-linejoin="round" stroke="#303030" id="432" stroke-linecap="round" ed:parentid="340" fill="none"/>
    <path d="M-9.5,-105.6L-9.5,99.6C-9.5,102.9,-6.8,105.6,-3.5,105.6L9.5,105.6" transform="matrix(1,0,0,1,692.73,5134.15)" ed:tosuperid="433" stroke-linejoin="round" stroke="#303030" id="434" stroke-linecap="round" ed:parentid="340" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,807.43,5073.72)" ed:tosuperid="436" stroke-linejoin="round" stroke="#303030" id="437" stroke-linecap="round" ed:parentid="429" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,826.23,5142.02)" ed:tosuperid="438" stroke-linejoin="round" stroke="#303030" id="439" stroke-linecap="round" ed:parentid="431" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,964.94,5180.77)" ed:tosuperid="440" stroke-linejoin="round" stroke="#303030" id="441" stroke-linecap="round" ed:parentid="438" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,239.82,5337.68)" ed:tosuperid="442" stroke-linejoin="round" stroke="#303030" id="443" stroke-linecap="round" ed:parentid="104" fill="none"/>
    <path d="M-9.5,-215.9L-9.5,209.9C-9.5,213.2,-6.8,215.9,-3.5,215.9L9.5,215.9" transform="matrix(1,0,0,1,239.82,5542.58)" ed:tosuperid="444" stroke-linejoin="round" stroke="#303030" id="445" stroke-linecap="round" ed:parentid="104" fill="none"/>
    <path d="M-9.5,-1005.9L-9.5,999.9C-9.5,1003.2,-6.8,1005.9,-3.5,1005.9L9.5,1005.9" transform="matrix(1,0,0,1,239.82,6332.63)" ed:tosuperid="446" stroke-linejoin="round" stroke="#303030" id="447" stroke-linecap="round" ed:parentid="104" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,297.72,5371.83)" ed:tosuperid="448" stroke-linejoin="round" stroke="#303030" id="449" stroke-linecap="round" ed:parentid="442" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,297.72,5388.9)" ed:tosuperid="450" stroke-linejoin="round" stroke="#303030" id="451" stroke-linecap="round" ed:parentid="442" fill="none"/>
    <path d="M-9.5,-96.4L-9.5,90.3C-9.5,93.7,-6.8,96.3,-3.5,96.3L9.5,96.3" transform="matrix(1,0,0,1,297.72,5457.2)" ed:tosuperid="452" stroke-linejoin="round" stroke="#303030" id="453" stroke-linecap="round" ed:parentid="442" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,348.83,5440.13)" ed:tosuperid="454" stroke-linejoin="round" stroke="#303030" id="455" stroke-linecap="round" ed:parentid="450" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,348.83,5457.2)" ed:tosuperid="456" stroke-linejoin="round" stroke="#303030" id="457" stroke-linecap="round" ed:parentid="450" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,348.83,5474.27)" ed:tosuperid="458" stroke-linejoin="round" stroke="#303030" id="459" stroke-linecap="round" ed:parentid="450" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,348.83,5576.73)" ed:tosuperid="461" stroke-linejoin="round" stroke="#303030" id="462" stroke-linecap="round" ed:parentid="452" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,348.83,5610.88)" ed:tosuperid="463" stroke-linejoin="round" stroke="#303030" id="464" stroke-linecap="round" ed:parentid="452" fill="none"/>
    <path d="M-9.5,-79.3L-9.5,73.3C-9.5,76.6,-6.8,79.3,-3.5,79.3L9.5,79.3" transform="matrix(1,0,0,1,348.83,5645.02)" ed:tosuperid="465" stroke-linejoin="round" stroke="#303030" id="466" stroke-linecap="round" ed:parentid="452" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,423.93,5610.88)" ed:tosuperid="467" stroke-linejoin="round" stroke="#303030" id="468" stroke-linecap="round" ed:parentid="461" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,448.33,5679.17)" ed:tosuperid="469" stroke-linejoin="round" stroke="#303030" id="470" stroke-linecap="round" ed:parentid="463" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,358.52,5781.63)" ed:tosuperid="471" stroke-linejoin="round" stroke="#303030" id="472" stroke-linecap="round" ed:parentid="444" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,402.83,5815.77)" ed:tosuperid="473" stroke-linejoin="round" stroke="#303030" id="474" stroke-linecap="round" ed:parentid="471" fill="none"/>
    <path d="M-9.5,-264L-9.5,258C-9.5,261.3,-6.8,264,-3.5,264L9.5,264" transform="matrix(1,0,0,1,402.83,6068.77)" ed:tosuperid="475" stroke-linejoin="round" stroke="#303030" id="476" stroke-linecap="round" ed:parentid="471" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,449.53,5849.92)" ed:tosuperid="477" stroke-linejoin="round" stroke="#303030" id="478" stroke-linecap="round" ed:parentid="473" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,671.03,5884.07)" ed:tosuperid="479" stroke-linejoin="round" stroke="#303030" id="480" stroke-linecap="round" ed:parentid="477" fill="none"/>
    <path d="M-9.5,-178.6L-9.5,172.6C-9.5,175.9,-6.8,178.6,-3.5,178.6L9.5,178.6" transform="matrix(1,0,0,1,449.53,6017.55)" ed:tosuperid="481" stroke-linejoin="round" stroke="#303030" id="482" stroke-linecap="round" ed:parentid="473" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.4,11" transform="matrix(1,0,0,1,500.63,6219.32)" ed:tosuperid="483" stroke-linejoin="round" stroke="#303030" id="484" stroke-linecap="round" ed:parentid="481" fill="none"/>
    <path d="M-9.5,-28.1L-9.5,22C-9.5,25.4,-6.8,28,-3.5,28L9.5,28" transform="matrix(1,0,0,1,500.63,6236.4)" ed:tosuperid="485" stroke-linejoin="round" stroke="#303030" id="486" stroke-linecap="round" ed:parentid="481" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,500.63,6253.47)" ed:tosuperid="487" stroke-linejoin="round" stroke="#303030" id="488" stroke-linecap="round" ed:parentid="481" fill="none"/>
    <path d="M-9.5,-103.3L-9.5,97.3C-9.5,100.6,-6.8,103.3,-3.5,103.3L9.5,103.3" transform="matrix(1,0,0,1,449.53,5942.27)" ed:tosuperid="489" stroke-linejoin="round" stroke="#303030" id="490" stroke-linecap="round" ed:parentid="473" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,456.73,6355.92)" ed:tosuperid="491" stroke-linejoin="round" stroke="#303030" id="492" stroke-linecap="round" ed:parentid="475" fill="none"/>
    <path d="M-9.5,-79.1L-9.5,73C-9.5,76.4,-6.8,79,-3.5,79L9.5,79" transform="matrix(1,0,0,1,456.73,6424)" ed:tosuperid="493" stroke-linejoin="round" stroke="#303030" id="494" stroke-linecap="round" ed:parentid="475" fill="none"/>
    <path d="M-9.5,-385.2L-9.5,379.1C-9.5,382.5,-6.8,385.1,-3.5,385.1L9.5,385.1" transform="matrix(1,0,0,1,456.73,6730.1)" ed:tosuperid="495" stroke-linejoin="round" stroke="#303030" id="496" stroke-linecap="round" ed:parentid="475" fill="none"/>
    <path d="M-9.5,-20.2L-9.5,14.2C-9.5,17.5,-6.8,20.2,-3.5,20.2L9.5,20.2" transform="matrix(1,0,0,1,704.87,6637.42)" ed:tosuperid="497" stroke-linejoin="round" stroke="#303030" id="498" stroke-linecap="round" ed:parentid="493" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,507.83,7138.42)" ed:tosuperid="499" stroke-linejoin="round" stroke="#303030" id="500" stroke-linecap="round" ed:parentid="495" fill="none"/>
    <path d="M-9.5,-28.1L-9.5,22C-9.5,25.4,-6.8,28,-3.5,28L9.5,28" transform="matrix(1,0,0,1,507.83,7155.5)" ed:tosuperid="501" stroke-linejoin="round" stroke="#303030" id="502" stroke-linecap="round" ed:parentid="495" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,507.83,7172.57)" ed:tosuperid="503" stroke-linejoin="round" stroke="#303030" id="504" stroke-linecap="round" ed:parentid="495" fill="none"/>
    <path d="M-9.5,-62.2L-9.5,56.2C-9.5,59.5,-6.8,62.2,-3.5,62.2L9.5,62.2" transform="matrix(1,0,0,1,507.83,7189.65)" ed:tosuperid="505" stroke-linejoin="round" stroke="#303030" id="506" stroke-linecap="round" ed:parentid="495" fill="none"/>
    <path d="M-9.5,-262.2L-9.5,256.2C-9.5,259.5,-6.8,262.2,-3.5,262.2L9.5,262.2" transform="matrix(1,0,0,1,456.73,6607.15)" ed:tosuperid="507" stroke-linejoin="round" stroke="#303030" id="508" stroke-linecap="round" ed:parentid="475" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,772.46,7056.32)" ed:tosuperid="509" stroke-linejoin="round" stroke="#303030" id="510" stroke-linecap="round" ed:parentid="507" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,682.14,7279.62)" ed:tosuperid="511" stroke-linejoin="round" stroke="#303030" id="512" stroke-linecap="round" ed:parentid="505" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,336.92,7361.73)" ed:tosuperid="513" stroke-linejoin="round" stroke="#303030" id="514" stroke-linecap="round" ed:parentid="446" fill="none"/>
    <path d="M-9.5,-251.4L-9.5,245.4C-9.5,248.7,-6.8,251.4,-3.5,251.4L9.5,251.4" transform="matrix(1,0,0,1,336.92,7602.1)" ed:tosuperid="515" stroke-linejoin="round" stroke="#303030" id="516" stroke-linecap="round" ed:parentid="446" fill="none"/>
    <path d="M-9.5,-448.4L-9.5,442.4C-9.5,445.7,-6.8,448.4,-3.5,448.4L9.5,448.4" transform="matrix(1,0,0,1,336.92,7799.13)" ed:tosuperid="517" stroke-linejoin="round" stroke="#303030" id="518" stroke-linecap="round" ed:parentid="446" fill="none"/>
    <path d="M-9.5,-482.5L-9.5,476.5C-9.5,479.8,-6.8,482.5,-3.5,482.5L9.5,482.5" transform="matrix(1,0,0,1,336.92,7833.27)" ed:tosuperid="519" stroke-linejoin="round" stroke="#303030" id="520" stroke-linecap="round" ed:parentid="446" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,394.83,7395.88)" ed:tosuperid="522" stroke-linejoin="round" stroke="#303030" id="523" stroke-linecap="round" ed:parentid="513" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,394.83,7412.95)" ed:tosuperid="524" stroke-linejoin="round" stroke="#303030" id="525" stroke-linecap="round" ed:parentid="513" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,466.33,7464.17)" ed:tosuperid="526" stroke-linejoin="round" stroke="#303030" id="527" stroke-linecap="round" ed:parentid="524" fill="none"/>
    <path d="M-9.5,-28L-9.5,22.1C-9.5,25.4,-6.8,28.1,-3.5,28.1L9.5,28.1" transform="matrix(1,0,0,1,466.33,7481.25)" ed:tosuperid="528" stroke-linejoin="round" stroke="#303030" id="529" stroke-linecap="round" ed:parentid="524" fill="none"/>
    <path d="M-9.5,-79.3L-9.5,73.3C-9.5,76.6,-6.8,79.3,-3.5,79.3L9.5,79.3" transform="matrix(1,0,0,1,394.83,7464.17)" ed:tosuperid="530" stroke-linejoin="round" stroke="#303030" id="531" stroke-linecap="round" ed:parentid="513" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,452.73,7566.62)" ed:tosuperid="532" stroke-linejoin="round" stroke="#303030" id="533" stroke-linecap="round" ed:parentid="530" fill="none"/>
    <path d="M-9.5,-32.7L-9.5,26.6C-9.5,30,-6.8,32.6,-3.5,32.6L9.5,32.6" transform="matrix(1,0,0,1,452.73,7588.3)" ed:tosuperid="534" stroke-linejoin="round" stroke="#303030" id="535" stroke-linecap="round" ed:parentid="530" fill="none"/>
    <path d="M-9.5,-54.3L-9.5,48.3C-9.5,51.6,-6.8,54.3,-3.5,54.3L9.5,54.3" transform="matrix(1,0,0,1,452.73,7609.97)" ed:tosuperid="536" stroke-linejoin="round" stroke="#303030" id="537" stroke-linecap="round" ed:parentid="530" fill="none"/>
    <path d="M-9.5,-156.8L-9.5,150.8C-9.5,154.1,-6.8,156.8,-3.5,156.8L9.5,156.8" transform="matrix(1,0,0,1,394.83,7541.68)" ed:tosuperid="538" stroke-linejoin="round" stroke="#303030" id="539" stroke-linecap="round" ed:parentid="513" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,452.73,7721.63)" ed:tosuperid="540" stroke-linejoin="round" stroke="#303030" id="541" stroke-linecap="round" ed:parentid="538" fill="none"/>
    <path d="M-9.5,-28L-9.5,22C-9.5,25.4,-6.8,28,-3.5,28L9.5,28" transform="matrix(1,0,0,1,452.73,7738.7)" ed:tosuperid="542" stroke-linejoin="round" stroke="#303030" id="543" stroke-linecap="round" ed:parentid="538" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,497.03,7794.52)" ed:tosuperid="544" stroke-linejoin="round" stroke="#303030" id="545" stroke-linecap="round" ed:parentid="542" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,394.83,7876.63)" ed:tosuperid="546" stroke-linejoin="round" stroke="#303030" id="547" stroke-linecap="round" ed:parentid="515" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,394.83,7910.77)" ed:tosuperid="548" stroke-linejoin="round" stroke="#303030" id="549" stroke-linecap="round" ed:parentid="515" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,515.53,7910.77)" ed:tosuperid="550" stroke-linejoin="round" stroke="#303030" id="551" stroke-linecap="round" ed:parentid="546" fill="none"/>
    <path d="M-9.5,-62.2L-9.5,56.2C-9.5,59.5,-6.8,62.2,-3.5,62.2L9.5,62.2" transform="matrix(1,0,0,1,394.83,7927.85)" ed:tosuperid="552" stroke-linejoin="round" stroke="#303030" id="553" stroke-linecap="round" ed:parentid="515" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,466.33,8013.22)" ed:tosuperid="554" stroke-linejoin="round" stroke="#303030" id="555" stroke-linecap="round" ed:parentid="552" fill="none"/>
    <path d="M-9.5,-32.6L-9.5,26.6C-9.5,30,-6.8,32.6,-3.5,32.6L9.5,32.6" transform="matrix(1,0,0,1,466.33,8034.9)" ed:tosuperid="556" stroke-linejoin="round" stroke="#303030" id="557" stroke-linecap="round" ed:parentid="552" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,751.66,8099.92)" ed:tosuperid="558" stroke-linejoin="round" stroke="#303030" id="559" stroke-linecap="round" ed:parentid="556" fill="none"/>
    <path d="M-9.5,-71.4L-9.5,65.4C-9.5,68.7,-6.8,71.4,-3.5,71.4L9.5,71.4" transform="matrix(1,0,0,1,466.33,8073.65)" ed:tosuperid="560" stroke-linejoin="round" stroke="#303030" id="561" stroke-linecap="round" ed:parentid="552" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,744.63,8168.22)" ed:tosuperid="562" stroke-linejoin="round" stroke="#303030" id="563" stroke-linecap="round" ed:parentid="560" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,1006.54,8202.37)" ed:tosuperid="564" stroke-linejoin="round" stroke="#303030" id="565" stroke-linecap="round" ed:parentid="562" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,394.83,8270.67)" ed:tosuperid="566" stroke-linejoin="round" stroke="#303030" id="567" stroke-linecap="round" ed:parentid="517" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,462.83,8338.97)" ed:tosuperid="568" stroke-linejoin="round" stroke="#303030" id="569" stroke-linecap="round" ed:parentid="519" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,635.13,8373.12)" ed:tosuperid="570" stroke-linejoin="round" stroke="#303030" id="571" stroke-linecap="round" ed:parentid="568" fill="none"/>
    <path d="M-9.5,-28L-9.5,22C-9.5,25.4,-6.8,28,-3.5,28L9.5,28" transform="matrix(1,0,0,1,635.13,8390.2)" ed:tosuperid="572" stroke-linejoin="round" stroke="#303030" id="573" stroke-linecap="round" ed:parentid="568" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,635.13,8407.27)" ed:tosuperid="574" stroke-linejoin="round" stroke="#303030" id="575" stroke-linecap="round" ed:parentid="568" fill="none"/>
    <path d="M-9.5,-79.3L-9.5,73.3C-9.5,76.6,-6.8,79.3,-3.5,79.3L9.5,79.3" transform="matrix(1,0,0,1,462.83,8407.27)" ed:tosuperid="576" stroke-linejoin="round" stroke="#303030" id="577" stroke-linecap="round" ed:parentid="519" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,520.73,8509.72)" ed:tosuperid="578" stroke-linejoin="round" stroke="#303030" id="579" stroke-linecap="round" ed:parentid="576" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,520.73,8543.87)" ed:tosuperid="580" stroke-linejoin="round" stroke="#303030" id="581" stroke-linecap="round" ed:parentid="576" fill="none"/>
    <path d="M-9.5,-66.8L-9.5,60.8C-9.5,64.1,-6.8,66.8,-3.5,66.8L9.5,66.8" transform="matrix(1,0,0,1,520.73,8565.55)" ed:tosuperid="582" stroke-linejoin="round" stroke="#303030" id="583" stroke-linecap="round" ed:parentid="576" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,674.63,8543.87)" ed:tosuperid="584" stroke-linejoin="round" stroke="#303030" id="585" stroke-linecap="round" ed:parentid="578" fill="none"/>
    <path d="M-9.5,-662.5L-9.5,656.5C-9.5,659.8,-6.8,662.5,-3.5,662.5L9.5,662.5" transform="matrix(1,0,0,1,336.92,8013.22)" ed:tosuperid="586" stroke-linejoin="round" stroke="#303030" id="587" stroke-linecap="round" ed:parentid="446" fill="none"/>
    <path d="M-9.5,-679.5L-9.5,673.5C-9.5,676.9,-6.8,679.5,-3.5,679.5L9.5,679.5" transform="matrix(1,0,0,1,336.92,8030.3)" ed:tosuperid="588" stroke-linejoin="round" stroke="#303030" id="589" stroke-linecap="round" ed:parentid="446" fill="none"/>
    <path d="M-9.5,-816.6L-9.5,810.6C-9.5,814,-6.8,816.6,-3.5,816.6L9.5,816.6" transform="matrix(1,0,0,1,336.92,8167.4)" ed:tosuperid="590" stroke-linejoin="round" stroke="#303030" id="591" stroke-linecap="round" ed:parentid="446" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,566.43,8733.02)" ed:tosuperid="592" stroke-linejoin="round" stroke="#303030" id="593" stroke-linecap="round" ed:parentid="588" fill="none"/>
    <path d="M-9.5,-35.8L-9.5,29.8C-9.5,33.1,-6.8,35.8,-3.5,35.8L9.5,35.8" transform="matrix(1,0,0,1,665.93,8791.97)" ed:tosuperid="594" stroke-linejoin="round" stroke="#303030" id="595" stroke-linecap="round" ed:parentid="592" fill="none"/>
    <path d="M-9.5,-87.3L-9.5,81.3C-9.5,84.6,-6.8,87.3,-3.5,87.3L9.5,87.3" transform="matrix(1,0,0,1,665.93,8843.45)" ed:tosuperid="596" stroke-linejoin="round" stroke="#303030" id="597" stroke-linecap="round" ed:parentid="592" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,394.83,9007.22)" ed:tosuperid="598" stroke-linejoin="round" stroke="#303030" id="599" stroke-linecap="round" ed:parentid="590" fill="none"/>
    <path d="M-9.5,-28L-9.5,22C-9.5,25.4,-6.8,28,-3.5,28L9.5,28" transform="matrix(1,0,0,1,394.83,9024.3)" ed:tosuperid="600" stroke-linejoin="round" stroke="#303030" id="601" stroke-linecap="round" ed:parentid="590" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,534.33,9075.52)" ed:tosuperid="602" stroke-linejoin="round" stroke="#303030" id="603" stroke-linecap="round" ed:parentid="600" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,709.43,9109.67)" ed:tosuperid="604" stroke-linejoin="round" stroke="#303030" id="605" stroke-linecap="round" ed:parentid="602" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,876.54,9143.82)" ed:tosuperid="606" stroke-linejoin="round" stroke="#303030" id="607" stroke-linecap="round" ed:parentid="604" fill="none"/>
    <path d="M-9.5,-28L-9.5,22C-9.5,25.4,-6.8,28,-3.5,28L9.5,28" transform="matrix(1,0,0,1,876.54,9160.9)" ed:tosuperid="608" stroke-linejoin="round" stroke="#303030" id="609" stroke-linecap="round" ed:parentid="604" fill="none"/>
    <path d="M-9.5,-936.2L-9.5,930.2C-9.5,933.5,-6.8,936.2,-3.5,936.2L9.5,936.2" transform="matrix(1,0,0,1,336.92,8286.92)" ed:tosuperid="612" stroke-linejoin="round" stroke="#303030" id="613" stroke-linecap="round" ed:parentid="446" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,222.62,9321.08)" ed:tosuperid="614" stroke-linejoin="round" stroke="#303030" id="615" stroke-linecap="round" ed:parentid="106" fill="none"/>
    <path d="M-9.5,-41.9L-9.5,35.8C-9.5,39.2,-6.8,41.8,-3.5,41.8L9.5,41.8" transform="matrix(1,0,0,1,222.62,9351.95)" ed:tosuperid="616" stroke-linejoin="round" stroke="#303030" id="617" stroke-linecap="round" ed:parentid="106" fill="none"/>
    <path d="M-9.5,-72.7L-9.5,66.7C-9.5,70,-6.8,72.7,-3.5,72.7L9.5,72.7" transform="matrix(1,0,0,1,222.62,9382.83)" ed:tosuperid="618" stroke-linejoin="round" stroke="#303030" id="619" stroke-linecap="round" ed:parentid="106" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,280.52,9478.73)" ed:tosuperid="620" stroke-linejoin="round" stroke="#303030" id="621" stroke-linecap="round" ed:parentid="618" fill="none"/>
    <path d="M-9.5,-28L-9.5,22C-9.5,25.4,-6.8,28,-3.5,28L9.5,28" transform="matrix(1,0,0,1,280.52,9495.8)" ed:tosuperid="622" stroke-linejoin="round" stroke="#303030" id="623" stroke-linecap="round" ed:parentid="618" fill="none"/>
    <path d="M-9.5,-96.4L-9.5,90.4C-9.5,93.7,-6.8,96.4,-3.5,96.4L9.5,96.4" transform="matrix(1,0,0,1,280.52,9564.1)" ed:tosuperid="624" stroke-linejoin="round" stroke="#303030" id="625" stroke-linecap="round" ed:parentid="618" fill="none"/>
    <path d="M-9.5,-268.4L-9.5,262.4C-9.5,265.7,-6.8,268.4,-3.5,268.4L9.5,268.4" transform="matrix(1,0,0,1,280.52,9736.17)" ed:tosuperid="626" stroke-linejoin="round" stroke="#303030" id="627" stroke-linecap="round" ed:parentid="618" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,338.43,9547.02)" ed:tosuperid="628" stroke-linejoin="round" stroke="#303030" id="629" stroke-linecap="round" ed:parentid="622" fill="none"/>
    <path d="M-9.5,-28L-9.5,22C-9.5,25.4,-6.8,28,-3.5,28L9.5,28" transform="matrix(1,0,0,1,338.43,9564.1)" ed:tosuperid="630" stroke-linejoin="round" stroke="#303030" id="631" stroke-linecap="round" ed:parentid="622" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,559.53,9615.32)" ed:tosuperid="632" stroke-linejoin="round" stroke="#303030" id="633" stroke-linecap="round" ed:parentid="630" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,345.23,9683.63)" ed:tosuperid="636" stroke-linejoin="round" stroke="#303030" id="637" stroke-linecap="round" ed:parentid="624" fill="none"/>
    <path d="M-9.5,-28L-9.5,22C-9.5,25.4,-6.8,28,-3.5,28L9.5,28" transform="matrix(1,0,0,1,345.23,9700.7)" ed:tosuperid="638" stroke-linejoin="round" stroke="#303030" id="639" stroke-linecap="round" ed:parentid="624" fill="none"/>
    <path d="M-9.5,-45.1L-9.5,39.1C-9.5,42.4,-6.8,45.1,-3.5,45.1L9.5,45.1" transform="matrix(1,0,0,1,345.23,9717.77)" ed:tosuperid="640" stroke-linejoin="round" stroke="#303030" id="641" stroke-linecap="round" ed:parentid="624" fill="none"/>
    <path d="M-9.5,-62.2L-9.5,56.2C-9.5,59.5,-6.8,62.2,-3.5,62.2L9.5,62.2" transform="matrix(1,0,0,1,345.23,9734.85)" ed:tosuperid="643" stroke-linejoin="round" stroke="#303030" id="644" stroke-linecap="round" ed:parentid="624" fill="none"/>
    <path d="M-9.5,-79.3L-9.5,73.3C-9.5,76.6,-6.8,79.3,-3.5,79.3L9.5,79.3" transform="matrix(1,0,0,1,345.23,9751.92)" ed:tosuperid="645" stroke-linejoin="round" stroke="#303030" id="646" stroke-linecap="round" ed:parentid="624" fill="none"/>
    <path d="M-9.5,-148.9L-9.5,142.9C-9.5,146.2,-6.8,148.9,-3.5,148.9L9.5,148.9" transform="matrix(1,0,0,1,345.23,9821.55)" ed:tosuperid="647" stroke-linejoin="round" stroke="#303030" id="648" stroke-linecap="round" ed:parentid="624" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,495.53,9858.97)" ed:tosuperid="651" stroke-linejoin="round" stroke="#303030" id="652" stroke-linecap="round" ed:parentid="645" fill="none"/>
    <path d="M-9.5,-15.6L-9.5,9.6C-9.5,12.9,-6.8,15.6,-3.5,15.6L9.5,15.6" transform="matrix(1,0,0,1,780.86,9911.52)" ed:tosuperid="653" stroke-linejoin="round" stroke="#303030" id="654" stroke-linecap="round" ed:parentid="651" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,308.43,305.37)" ed:tosuperid="655" stroke-linejoin="round" stroke="#303030" id="656" stroke-linecap="round" ed:parentid="120" fill="none"/>
    <path d="M-9.5,-11L-9.5,5C-9.5,8.3,-6.8,11,-3.5,11L9.5,11" transform="matrix(1,0,0,1,400.33,1847.42)" ed:tosuperid="657" stroke-linejoin="round" stroke="#303030" id="658" stroke-linecap="round" ed:parentid="148" fill="none"/>
    <g transform="matrix(1,0,0,1,22,20)" ed:width="164" id="101" ed:topictype="mainidea" ed:height="63" ed:layout="tree">
        <path d="M4,0L160,0C162.7,0,164,1.3,164,4L164,59C164,61.7,162.7,63,160,63L4,63C1.3,63,0,61.7,0,59L0,4C0,1.3,1.3,0,4,0z" stroke-linejoin="round" stroke="#435fbc" stroke-width="2" fill="#435fbc"/>
        <text class="st1">
            <tspan x="20" y="40.1" style="white-space:pre">组件化开发</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,154.4,116)" ed:width="84.736" id="102" ed:height="41.8" ed:layout="righttree" ed:parentid="101">
        <path d="M20.9,0L63.8,0C75.4,0,84.7,9.4,84.7,20.9C84.7,32.4,75.4,41.8,63.8,41.8L20.9,41.8C9.4,41.8,0,32.4,0,20.9C0,9.4,9.4,0,20.9,0z" stroke-linejoin="round" stroke="#d2d9ff" stroke-width="2" fill="#f5f6ff"/>
        <text class="st2">
            <tspan x="22" y="27.6" style="white-space:pre">组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,154.4,5284.9)" ed:width="151.936" id="104" ed:height="41.8" ed:layout="righttree" ed:parentid="101">
        <path d="M20.9,0L131,0C142.6,0,151.9,9.4,151.9,20.9C151.9,32.4,142.6,41.8,131,41.8L20.9,41.8C9.4,41.8,0,32.4,0,20.9C0,9.4,9.4,0,20.9,0z" stroke-linejoin="round" stroke="#d2d9ff" stroke-width="2" fill="#f5f6ff"/>
        <text class="st2">
            <tspan x="22" y="27.6" style="white-space:pre">Vue Router</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,154.4,9268.3)" ed:width="117.536" id="106" ed:height="41.8" ed:layout="righttree" ed:parentid="101">
        <path d="M20.9,0L96.6,0C108.2,0,117.5,9.4,117.5,20.9C117.5,32.4,108.2,41.8,96.6,41.8L20.9,41.8C9.4,41.8,0,32.4,0,20.9C0,9.4,9.4,0,20.9,0z" stroke-linejoin="round" stroke="#d2d9ff" stroke-width="2" fill="#f5f6ff"/>
        <text class="st2">
            <tspan x="22" y="27.6" style="white-space:pre">Vue CLI</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,215.67,167.55)" ed:width="50.808" id="108" ed:height="24.4" ed:layout="righttree" ed:parentid="102">
        <path d="M12.2,0L38.6,0C45.3,0,50.8,5.5,50.8,12.2C50.8,18.9,45.3,24.4,38.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">注册</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,215.67,713.95)" ed:width="50.808" id="110" ed:height="24.4" ed:layout="righttree" ed:parentid="102">
        <path d="M12.2,0L38.6,0C45.3,0,50.8,5.5,50.8,12.2C50.8,18.9,45.3,24.4,38.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">通信</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,215.67,2224.5)" ed:width="50.808" id="112" ed:height="24.4" ed:layout="righttree" ed:parentid="102">
        <path d="M12.2,0L38.6,0C45.3,0,50.8,5.5,50.8,12.2C50.8,18.9,45.3,24.4,38.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">插槽</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,215.67,3123.15)" ed:width="78.008" id="114" ed:height="24.4" ed:layout="righttree" ed:parentid="102">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">内置组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,259.97,201.7)" ed:width="78.008" id="116" ed:height="24.4" ed:layout="righttree" ed:parentid="108">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">全局注册</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,259.97,338.3)" ed:width="78.008" id="118" ed:height="24.4" ed:layout="righttree" ed:parentid="108">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">组件基础</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,259.97,270)" ed:width="78.008" id="120" ed:height="24.4" ed:layout="righttree" ed:parentid="108">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">局部注册</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,317.88,235.85)" ed:width="200.408" id="122" ed:height="24.4" ed:layout="righttree" ed:parentid="116">
        <path d="M12.2,0L188.2,0C194.9,0,200.4,5.5,200.4,12.2C200.4,18.9,194.9,24.4,188.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">全局注册设置在根实例前注册</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,317.88,372.45)" ed:width="390.808" id="124" ed:height="24.4" ed:layout="righttree" ed:parentid="118">
        <path d="M12.2,0L378.6,0C385.3,0,390.8,5.5,390.8,12.2C390.8,18.9,385.3,24.4,378.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">本质，组件时可复用Vue实例，故可与new Vue接收相同选项</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,532.18,406.6)" ed:width="144.408" id="126" ed:height="24.4" ed:layout="righttree" ed:parentid="124">
        <path d="M12.2,0L132.2,0C138.9,0,144.4,5.5,144.4,12.2C144.4,18.9,138.9,24.4,132.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">注：el是根实例特有</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,317.88,440.75)" ed:width="380.408" id="128" ed:height="24.4" ed:layout="righttree" ed:parentid="118">
        <path d="M12.2,0L368.2,0C374.9,0,380.4,5.5,380.4,12.2C380.4,18.9,374.9,24.4,368.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">命名规则（无论何种命名方式，dom使用组件只能用短线）</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,526.98,474.9)" ed:width="50.808" id="130" ed:height="24.4" ed:layout="righttree" ed:parentid="128">
        <path d="M12.2,0L38.6,0C45.3,0,50.8,5.5,50.8,12.2C50.8,18.9,45.3,24.4,38.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">短线</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,526.98,509.05)" ed:width="64.408" id="132" ed:height="24.4" ed:layout="righttree" ed:parentid="128">
        <path d="M12.2,0L52.2,0C58.9,0,64.4,5.5,64.4,12.2C64.4,18.9,58.9,24.4,52.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">大驼峰</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,317.88,543.2)" ed:width="109.208" id="134" ed:height="24.4" ed:layout="righttree" ed:parentid="118">
        <path d="M12.2,0L97,0C103.7,0,109.2,5.5,109.2,12.2C109.2,18.9,103.7,24.4,97,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">template选项</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,391.38,577.35)" ed:width="105.208" id="136" ed:height="24.4" ed:layout="righttree" ed:parentid="134">
        <path d="M12.2,0L93,0C99.7,0,105.2,5.5,105.2,12.2C105.2,18.9,99.7,24.4,93,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">设置组件结构</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,317.88,611.5)" ed:width="78.80800000000001" id="138" ed:height="24.4" ed:layout="righttree" ed:parentid="118">
        <path d="M12.2,0L66.6,0C73.3,0,78.8,5.5,78.8,12.2C78.8,18.9,73.3,24.4,66.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">data选项</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,376.18,645.65)" ed:width="310.008" id="140" ed:height="24.4" ed:layout="righttree" ed:parentid="138">
        <path d="M12.2,0L297.8,0C304.5,0,310,5.5,310,12.2C310,18.9,304.5,24.4,297.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">组件data必须是一个函数，返回组件存储的数据</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,550.08,679.8)" ed:width="159.608" id="142" ed:height="24.4" ed:layout="righttree" ed:parentid="140">
        <path d="M12.2,0L147.4,0C154.1,0,159.6,5.5,159.6,12.2C159.6,18.9,154.1,24.4,147.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">确保返回唯一组件实例</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,259.97,748.1)" ed:width="159.608" id="144" ed:height="24.4" ed:layout="righttree" ed:parentid="110">
        <path d="M12.2,0L147.4,0C154.1,0,159.6,5.5,159.6,12.2C159.6,18.9,154.1,24.4,147.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">组件间传递数据的操作</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,358.68,782.25)" ed:width="64.408" id="146" ed:height="24.4" ed:layout="righttree" ed:parentid="144">
        <path d="M12.2,0L52.2,0C58.9,0,64.4,5.5,64.4,12.2C64.4,18.9,58.9,24.4,52.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">父传子</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,358.68,1812.05)" ed:width="64.408" id="148" ed:height="24.4" ed:layout="righttree" ed:parentid="144">
        <path d="M12.2,0L52.2,0C58.9,0,64.4,5.5,64.4,12.2C64.4,18.9,58.9,24.4,52.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">子传父</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,358.68,1880.35)" ed:width="78.008" id="150" ed:height="24.4" ed:layout="righttree" ed:parentid="144">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">兄弟组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,358.68,2087.9)" ed:width="132.408" id="152" ed:height="24.4" ed:layout="righttree" ed:parentid="144">
        <path d="M12.2,0L120.2,0C126.9,0,132.4,5.5,132.4,12.2C132.4,18.9,126.9,24.4,120.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">其他（简单应用）</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,409.78,816.4)" ed:width="453.208" id="154" ed:height="24.4" ed:layout="righttree" ed:parentid="146">
        <path d="M12.2,0L441,0C447.7,0,453.2,5.5,453.2,12.2C453.2,18.9,447.7,24.4,441,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">props属性：props数据可被插值直接使用，故不能与data中的数据重名</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,409.78,1260.35)" ed:width="105.208" id="156" ed:height="24.4" ed:layout="righttree" ed:parentid="146">
        <path d="M12.2,0L93,0C99.7,0,105.2,5.5,105.2,12.2C105.2,18.9,99.7,24.4,93,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">属性绑定方式</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,481.28,1294.5)" ed:width="105.208" id="158" ed:height="24.4" ed:layout="righttree" ed:parentid="156">
        <path d="M12.2,0L93,0C99.7,0,105.2,5.5,105.2,12.2C105.2,18.9,99.7,24.4,93,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">静态属性绑定</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,409.78,1465.25)" ed:width="363.608" id="160" ed:height="24.4" ed:layout="righttree" ed:parentid="146">
        <path d="M12.2,0L351.4,0C358.1,0,363.6,5.5,363.6,12.2C363.6,18.9,358.1,24.4,351.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">传递给子组件的值在子组件中只读，在子组件中不可更改</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,481.28,1362.8)" ed:width="105.208" id="162" ed:height="24.4" ed:layout="righttree" ed:parentid="156">
        <path d="M12.2,0L93,0C99.7,0,105.2,5.5,105.2,12.2C105.2,18.9,99.7,24.4,93,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">动态属性绑定</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,552.79,1328.65)" ed:width="270.008" id="164" ed:height="24.4" ed:layout="righttree" ed:parentid="158">
        <path d="M12.2,0L257.8,0C264.5,0,270,5.5,270,12.2C270,18.9,264.5,24.4,257.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">不使用v-bind指令，直接以普通属性赋值</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,552.79,1396.95)" ed:width="350.808" id="166" ed:height="24.4" ed:layout="righttree" ed:parentid="162">
        <path d="M12.2,0L338.6,0C345.3,0,350.8,5.5,350.8,12.2C350.8,18.9,345.3,24.4,338.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">不绑定data选项数据：直接绑定值，没有动态更新效果</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,552.79,1431.1)" ed:width="433.208" id="168" ed:height="24.4" ed:layout="righttree" ed:parentid="162">
        <path d="M12.2,0L421,0C427.7,0,433.2,5.5,433.2,12.2C433.2,18.9,427.7,24.4,421,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">绑定data选项数据：绑定父实例data中数据，可以由父动态更新到子</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,655.28,850.55)" ed:width="78.008" id="170" ed:height="24.4" ed:layout="righttree" ed:parentid="154">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">命名规则</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,-165.18,-316.3)" ed:width="95.352" id="172" ed:topictype="floating" ed:height="39.6" ed:layout="map" style="display:none">
        <path d="M19.8,0L75.6,0C86.5,0,95.4,8.9,95.4,19.8C95.4,30.7,86.5,39.6,75.6,39.6L19.8,39.6C8.9,39.6,0,30.7,0,19.8C0,8.9,8.9,0,19.8,0z" stroke-linejoin="round" stroke="#454545" stroke-width="3" fill="#454545"/>
        <text class="st4">
            <tspan x="22" y="24.8" style="white-space:pre">子主题</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,713.19,884.7)" ed:width="322.808" id="173" ed:height="24.4" ed:layout="righttree" ed:parentid="170">
        <path d="M12.2,0L310.6,0C317.3,0,322.8,5.5,322.8,12.2C322.8,18.9,317.3,24.4,310.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">子组件中使用小驼峰命名，父组件绑定使用短横线</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,610.48,1499.4)" ed:width="245.208" id="175" ed:height="24.4" ed:layout="righttree" ed:parentid="160">
        <path d="M12.2,0L233,0C239.7,0,245.2,5.5,245.2,12.2C245.2,18.9,239.7,24.4,233,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">父子组件间的prop是单向下行绑定的</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,610.48,1533.55)" ed:width="296.408" id="177" ed:height="24.4" ed:layout="righttree" ed:parentid="160">
        <path d="M12.2,0L284.2,0C290.9,0,296.4,5.5,296.4,12.2C296.4,18.9,290.9,24.4,284.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">在子组件实例data选项中保存后可以更改数据</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,610.48,1567.7)" ed:width="532.856" id="179" ed:height="42.8" ed:layout="righttree" ed:parentid="160">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">父向子传递对象或数组prop时，在子组件改变对象某个值时会修改到父组件的值，</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">因为传递了对象引用，避免传递整个对象</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,655.28,918.85)" ed:width="142.808" id="181" ed:height="24.4" ed:layout="righttree" ed:parentid="154">
        <path d="M12.2,0L130.6,0C137.3,0,142.8,5.5,142.8,12.2C142.8,18.9,137.3,24.4,130.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">带类型检查的props</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,745.59,953)" ed:width="228.408" id="183" ed:height="24.4" ed:layout="righttree" ed:parentid="181">
        <path d="M12.2,0L216.2,0C222.9,0,228.4,5.5,228.4,12.2C228.4,18.9,222.9,24.4,216.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">设置null/undefined表示任意类型</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,745.59,987.15)" ed:width="227.608" id="185" ed:height="24.4" ed:layout="righttree" ed:parentid="181">
        <path d="M12.2,0L215.4,0C222.1,0,227.6,5.5,227.6,12.2C227.6,18.9,222.1,24.4,215.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">多种类型，使用数组定义多个类型</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,655.28,1021.3)" ed:width="146.008" id="187" ed:height="24.4" ed:layout="righttree" ed:parentid="154">
        <path d="M12.2,0L133.8,0C140.5,0,146,5.5,146,12.2C146,18.9,140.5,24.4,133.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">验证，使用配置对象</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,747.19,1055.45)" ed:width="191.608" id="189" ed:height="24.4" ed:layout="righttree" ed:parentid="187">
        <path d="M12.2,0L179.4,0C186.1,0,191.6,5.5,191.6,12.2C191.6,18.9,186.1,24.4,179.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">required属性表示必传prop</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,747.19,1089.6)" ed:width="254.808" id="193" ed:height="24.4" ed:layout="righttree" ed:parentid="187">
        <path d="M12.2,0L242.6,0C249.3,0,254.8,5.5,254.8,12.2C254.8,18.9,249.3,24.4,242.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">数组或对象使用工厂函数返回保证唯一</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,747.19,1123.75)" ed:width="274.808" id="195" ed:height="24.4" ed:layout="righttree" ed:parentid="187">
        <path d="M12.2,0L262.6,0C269.3,0,274.8,5.5,274.8,12.2C274.8,18.9,269.3,24.4,262.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">validator属性验证函数验证传入prop内容</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,903.49,1157.9)" ed:width="173.208" id="197" ed:height="24.4" ed:layout="righttree" ed:parentid="195">
        <path d="M12.2,0L161,0C167.7,0,173.2,5.5,173.2,12.2C173.2,18.9,167.7,24.4,161,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">返回布尔值表示判断结果</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,903.49,1192.05)" ed:width="454.808" id="199" ed:height="24.4" ed:layout="righttree" ed:parentid="195">
        <path d="M12.2,0L442.6,0C449.3,0,454.8,5.5,454.8,12.2C454.8,18.9,449.3,24.4,442.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">注：验证函数无法使用实例data，methods值，因为其内this是window</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,655.28,1226.2)" ed:width="435.608" id="201" ed:height="24.4" ed:layout="righttree" ed:parentid="154">
        <path d="M12.2,0L423.4,0C430.1,0,435.6,5.5,435.6,12.2C435.6,18.9,430.1,24.4,423.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.5" style="white-space:pre">非prop属性，子组件未接收父组件传值，将默认为子组件根元素属性</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,610.48,1620.25)" ed:width="532.856" id="250" ed:height="42.8" ed:layout="righttree" ed:parentid="160">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">子组件向父组件传值$event事件与dom事件的区别，前者简单，后者以对象形式，</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">复杂</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,610.48,1672.8)" ed:width="490.808" id="252" ed:height="24.4" ed:layout="righttree" ed:parentid="160">
        <path d="M12.2,0L478.6,0C485.3,0,490.8,5.5,490.8,12.2C490.8,18.9,485.3,24.4,478.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">v-model与子组件，仍然需结合prop接收父组件传值和自定义事件传回操作值</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,874.79,1706.95)" ed:width="500.504" id="254" ed:height="61.2" ed:layout="righttree" ed:parentid="252">
        <path d="M30.6,0L469.9,0C486.8,0,500.5,13.7,500.5,30.6C500.5,47.5,486.8,61.2,469.9,61.2L30.6,61.2C13.7,61.2,0,47.5,0,30.6C0,13.7,13.7,0,30.6,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="23" y="16.5" style="white-space:pre">v-model,语法糖，已经做过绑定操作，子组件使用value做prop接收，使用</tspan>
            <tspan x="23" y="34.9" style="white-space:pre">$emit触发input原有事件,@input=$emit('input', $event.target.value),</tspan>
            <tspan x="23" y="53.3" style="white-space:pre">传到v-model</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,1143.94,1777.9)" ed:width="491.6079999999999" id="256" ed:height="24.4" ed:layout="righttree" ed:parentid="254">
        <path d="M12.2,0L479.4,0C486.1,0,491.6,5.5,491.6,12.2C491.6,18.9,486.1,24.4,479.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">$emit即可触发自定义事件，也可以触发原生事件，需使用原生event事件对象</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,358.68,1967.05)" ed:width="82.80800000000001" id="258" ed:height="24.4" ed:layout="righttree" ed:parentid="144">
        <path d="M12.2,0L70.6,0C77.3,0,82.8,5.5,82.8,12.2C82.8,18.9,77.3,24.4,70.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">eventBus</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,416.58,1914.5)" ed:width="532.856" id="260" ed:height="42.8" ed:layout="righttree" ed:parentid="150">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">通过共同父组件传值，核心，发$emit, 收prop中转，简单写法是直接在模板中监</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">听事件对象传值给另一兄弟组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,418.98,2001.2)" ed:width="532.856" id="262" ed:height="42.8" ed:layout="righttree" ed:parentid="258">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">事件中心，负责传值操作；使用vue实例管理传值操作，通过给实例注册，调用事</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">件传值</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,704.31,2053.75)" ed:width="509.208" id="264" ed:height="24.4" ed:layout="righttree" ed:parentid="262">
        <path d="M12.2,0L497,0C503.7,0,509.2,5.5,509.2,12.2C509.2,18.9,503.7,24.4,497,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">核心，空vue实例，发送方：emit触发事件，接收方：created钩子中on监听事件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,443.78,2122.05)" ed:width="256.408" id="266" ed:height="24.4" ed:layout="righttree" ed:parentid="152">
        <path d="M12.2,0L244.2,0C250.9,0,256.4,5.5,256.4,12.2C256.4,18.9,250.9,24.4,244.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">$root: 访问组件树根实例进行传值操作</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,443.78,2190.35)" ed:width="273.208" id="268" ed:height="24.4" ed:layout="righttree" ed:parentid="152">
        <path d="M12.2,0L261,0C267.7,0,273.2,5.5,273.2,12.2C273.2,18.9,267.7,24.4,261,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">$refs: 获取设置了ref的html标签或子组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,590.88,2156.2)" ed:width="182.008" id="270" ed:height="24.4" ed:layout="righttree" ed:parentid="266">
        <path d="M12.2,0L169.8,0C176.5,0,182,5.5,182,12.2C182,18.9,176.5,24.4,169.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">$parent, $children类似，</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,259.97,2258.65)" ed:width="218.008" id="272" ed:height="24.4" ed:layout="righttree" ed:parentid="112">
        <path d="M12.2,0L205.8,0C212.5,0,218,5.5,218,12.2C218,18.9,212.5,24.4,205.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">快捷设置组件内容（类比prop）</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,387.88,2292.8)" ed:width="78.008" id="274" ed:height="24.4" ed:layout="righttree" ed:parentid="272">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">单个插槽</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,387.88,2450.45)" ed:width="78.008" id="276" ed:height="24.4" ed:layout="righttree" ed:parentid="272">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">具名插槽</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,387.88,2573.95)" ed:width="268.408" id="278" ed:height="24.4" ed:layout="righttree" ed:parentid="272">
        <path d="M12.2,0L256.2,0C262.9,0,268.4,5.5,268.4,12.2C268.4,18.9,262.9,24.4,256.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">作用域插槽：同时传递子组件可访问数据</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,445.78,2326.95)" ed:width="532.856" id="280" ed:height="42.8" ed:layout="righttree" ed:parentid="274">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">要点：父组件视图模板只能使用当前组件数据，子组件视图模板只能使用当前组件</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">数据，父组件无法使用子组件数据；</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,445.78,2379.5)" ed:width="546.104" id="282" ed:height="61.2" ed:layout="righttree" ed:parentid="274">
        <path d="M30.6,0L515.5,0C532.4,0,546.1,13.7,546.1,30.6C546.1,47.5,532.4,61.2,515.5,61.2L30.6,61.2C13.7,61.2,0,47.5,0,30.6C0,13.7,13.7,0,30.6,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="23" y="16.5" style="white-space:pre">子组件设置slot插槽（设置内容），父组件在子组件引用标签内书写插槽内容（未</tspan>
            <tspan x="23" y="34.9" style="white-space:pre">使用插槽，会默认抛弃子组件标签内的内容），在子组件中可以在slot内书写默认</tspan>
            <tspan x="23" y="53.3" style="white-space:pre">插槽内容</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,445.78,2484.6)" ed:width="502.552" id="284" ed:height="79.59999999999999" ed:layout="righttree" ed:parentid="276">
        <path d="M39.8,0L462.8,0C484.7,0,502.6,17.8,502.6,39.8C502.6,61.8,484.7,79.6,462.8,79.6L39.8,79.6C17.8,79.6,0,61.8,0,39.8C0,17.8,17.8,0,39.8,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="30" y="16.5" style="white-space:pre">作用：向子组件设置多个内容时，</tspan>
            <tspan x="30" y="34.9" style="white-space:pre">子组件：&lt;slot name="插槽名">&lt;/slot></tspan>
            <tspan x="30" y="53.3" style="white-space:pre">父组件：&lt;template v-slot="插槽名" / #插槽名（简写）>&lt;/template></tspan>
            <tspan x="30" y="71.7" style="white-space:pre">未设置插槽名插槽可直接接收父组件未使用template标记区域内容</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,540.98,2608.1)" ed:width="532.856" id="286" ed:height="42.8" ed:layout="righttree" ed:parentid="278">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">让插槽可以访问子组件数据: 组件将需要被插槽使用的数据通过v-bind绑定给slot,</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">用于给插槽传递数据的属性称为插槽prop</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,826.31,2713.2)" ed:width="572.5999999999999" id="288" ed:height="98" ed:layout="righttree" ed:parentid="286">
        <path d="M49,0L523.6,0C550.7,0,572.6,21.9,572.6,49C572.6,76.1,550.7,98,523.6,98L49,98C21.9,98,0,76.1,0,49C0,21.9,21.9,0,49,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="37" y="16.5" style="white-space:pre">具体形式：子组件使用v-bind绑定子组件中要绑定的数据，</tspan>
            <tspan x="37" y="34.9" style="white-space:pre">父组件中使用&lt;com v-slot:插槽名="dataObj">{{dataObj[子组件绑定数据属性</tspan>
            <tspan x="37" y="53.3" style="white-space:pre">名]}}&lt;/com></tspan>
            <tspan x="37" y="71.7" style="white-space:pre">注：v-slot需要与template结合使用，仅有默认插槽时才可以直接书写到子组件标</tspan>
            <tspan x="37" y="90" style="white-space:pre">签上</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,826.31,2660.65)" ed:width="532.856" id="290" ed:height="42.8" ed:layout="righttree" ed:parentid="286">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">前提：组件渲染规则，在父组件中渲染的插槽只能使用父组件的数据，不能使用子</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">组件数据</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,1131.51,2820.95)" ed:width="532.856" id="296" ed:height="42.8" ed:layout="righttree" ed:parentid="288">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">默认default插槽简写：&lt;com v-slot="dataObj">{{dataObj[子组件绑定数据属性</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">名]}}&lt;/com></tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,1131.51,2873.5)" ed:width="349.848" id="298" ed:height="116.4" ed:layout="righttree" ed:parentid="288">
        <path d="M58.2,0L291.6,0C323.8,0,349.8,26.1,349.8,58.2C349.8,90.3,323.8,116.4,291.6,116.4L58.2,116.4C26.1,116.4,0,90.3,0,58.2C0,26.1,26.1,0,58.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="43" y="16.5" style="white-space:pre">其他插槽简写：</tspan>
            <tspan x="43" y="34.9" style="white-space:pre">&lt;com></tspan>
            <tspan x="43" y="53.3" style="white-space:pre">&lt;template v-slot: / #插槽名="dataObj"></tspan>
            <tspan x="43" y="71.7" style="white-space:pre">{{dataObj[子组件绑定数据属性名]}}</tspan>
            <tspan x="43" y="90" style="white-space:pre">&lt;/template></tspan>
            <tspan x="43" y="108.5" style="white-space:pre">&lt;/com></tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,1131.51,2999.65)" ed:width="546.104" id="300" ed:height="61.2" ed:layout="righttree" ed:parentid="288">
        <path d="M30.6,0L515.5,0C532.4,0,546.1,13.7,546.1,30.6C546.1,47.5,532.4,61.2,515.5,61.2L30.6,61.2C13.7,61.2,0,47.5,0,30.6C0,13.7,13.7,0,30.6,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="23" y="16.5" style="white-space:pre">插槽解构简写：</tspan>
            <tspan x="23" y="34.9" style="white-space:pre">&lt;com v-slot:插槽名="{子组件绑定数据属性名，etc}">{{子组件绑定数据属性名</tspan>
            <tspan x="23" y="53.3" style="white-space:pre">1}}{{子组件绑定数据属性名2}}&lt;/com></tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,1423.46,3070.6)" ed:width="532.856" id="308" ed:height="42.8" ed:layout="righttree" ed:parentid="300">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">插槽中v-slot绑定的对象（自定义命名）集合了子组件所有的插槽prop,故可以使用</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">解构</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,273.57,3157.3)" ed:width="186.808" id="310" ed:height="24.4" ed:layout="righttree" ed:parentid="114">
        <path d="M12.2,0L174.6,0C181.3,0,186.8,5.5,186.8,12.2C186.8,18.9,181.3,24.4,174.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">动态组件：切换的处理操作</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,273.57,3259.75)" ed:width="451.6079999999999" id="312" ed:height="24.4" ed:layout="righttree" ed:parentid="114">
        <path d="M12.2,0L439.4,0C446.1,0,451.6,5.5,451.6,12.2C451.6,18.9,446.1,24.4,439.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">keep-live组件：组件切换时的缓存操作，保留组件状态或避免重新渲染</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,273.57,3622.3)" ed:width="462.0079999999999" id="314" ed:height="24.4" ed:layout="righttree" ed:parentid="114">
        <path d="M12.2,0L449.8,0C456.5,0,462,5.5,462,12.2C462,18.9,456.5,24.4,449.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">过渡组件：插入，更新，移除dom切换时的提供不同方式过渡、动画效果</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,385.88,3191.45)" ed:width="355.6079999999999" id="316" ed:height="24.4" ed:layout="righttree" ed:parentid="310">
        <path d="M12.2,0L343.4,0C350.1,0,355.6,5.5,355.6,12.2C355.6,18.9,350.1,24.4,343.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">&lt;component :is="当前展示组件名">&lt;/component></tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,582.58,3225.6)" ed:width="322.8079999999999" id="318" ed:height="24.4" ed:layout="righttree" ed:parentid="316">
        <path d="M12.2,0L310.6,0C317.3,0,322.8,5.5,322.8,12.2C322.8,18.9,317.3,24.4,310.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">注意：切换时会销毁前一组件实例，创建后一实例</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,518.28,3293.9)" ed:width="532.856" id="320" ed:height="42.8" ed:layout="righttree" ed:parentid="312">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">内容书写在&lt;keep-live>内容&lt;/keep-live>，在切换时不再重新卸载组件，而是读</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">取缓存；</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,803.6,3346.45)" ed:width="207.608" id="322" ed:height="24.4" ed:layout="righttree" ed:parentid="320">
        <path d="M12.2,0L195.4,0C202.1,0,207.6,5.5,207.6,12.2C207.6,18.9,202.1,24.4,195.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">使用include属性指定缓存组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,926.31,3380.6)" ed:width="78.008" id="324" ed:height="24.4" ed:layout="righttree" ed:parentid="322">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">静态绑定</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,926.31,3467.3)" ed:width="78.008" id="326" ed:height="24.4" ed:layout="righttree" ed:parentid="322">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">动态绑定</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,984.21,3414.75)" ed:width="316.856" id="328" ed:height="42.8" ed:layout="righttree" ed:parentid="324">
        <path d="M21.4,0L295.5,0C307.3,0,316.9,9.6,316.9,21.4C316.9,33.2,307.3,42.8,295.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">&lt;keep-live include="ComA,ComB,ComC"></tspan>
            <tspan x="17" y="34.9" style="white-space:pre">注：组件名字符串之间不能由空格</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,984.21,3501.45)" ed:width="91.608" id="330" ed:height="24.4" ed:layout="righttree" ed:parentid="326">
        <path d="M12.2,0L79.4,0C86.1,0,91.6,5.5,91.6,12.2C91.6,18.9,86.1,24.4,79.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">数组或正则</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,803.6,3535.6)" ed:width="292.408" id="332" ed:height="24.4" ed:layout="righttree" ed:parentid="320">
        <path d="M12.2,0L280.2,0C286.9,0,292.4,5.5,292.4,12.2C292.4,18.9,286.9,24.4,280.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">使用exclude属性指定不缓存组件：使用同上</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,803.6,3569.75)" ed:width="532.856" id="334" ed:height="42.8" ed:layout="righttree" ed:parentid="320">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">使用max属性指定最近操作可缓存组件数量：开发需考虑全面，实际用户使用切换</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">不多</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,523.48,3656.45)" ed:width="166.008" id="336" ed:height="24.4" ed:layout="righttree" ed:parentid="314">
        <path d="M12.2,0L153.8,0C160.5,0,166,5.5,166,12.2C166,18.9,160.5,24.4,153.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">transition组件使用方式</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,523.48,4565.4)" ed:width="431.6079999999999" id="338" ed:height="24.4" ed:layout="righttree" ed:parentid="314">
        <path d="M12.2,0L419.4,0C426.1,0,431.6,5.5,431.6,12.2C431.6,18.9,426.1,24.4,419.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">自定义过渡类名: 优先级比普通css高，可用于第三方动画库样式覆盖</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,523.48,5004.2)" ed:width="319.6079999999999" id="340" ed:height="24.4" ed:layout="righttree" ed:parentid="314">
        <path d="M12.2,0L307.4,0C314.1,0,319.6,5.5,319.6,12.2C319.6,18.9,314.1,24.4,307.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">transition-group组件：给列表统一设置过渡动画</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,625.38,3690.6)" ed:width="287.6079999999999" id="342" ed:height="24.4" ed:layout="righttree" ed:parentid="336">
        <path d="M12.2,0L275.4,0C282.1,0,287.6,5.5,287.6,12.2C287.6,18.9,282.1,24.4,275.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">基本作用：给元素和组件添加离开/进入过渡</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,625.38,3724.75)" ed:width="91.608" id="344" ed:height="24.4" ed:layout="righttree" ed:parentid="336">
        <path d="M12.2,0L79.4,0C86.1,0,91.6,5.5,91.6,12.2C91.6,18.9,86.1,24.4,79.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">可应用场景</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,690.08,3758.9)" ed:width="46.008" id="346" ed:height="24.4" ed:layout="righttree" ed:parentid="344">
        <path d="M12.2,0L33.8,0C40.5,0,46,5.5,46,12.2C46,18.9,40.5,24.4,33.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">v-if</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,690.08,3793.05)" ed:width="70.008" id="348" ed:height="24.4" ed:layout="righttree" ed:parentid="344">
        <path d="M12.2,0L57.8,0C64.5,0,70,5.5,70,12.2C70,18.9,64.5,24.4,57.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">v-show</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,690.08,3827.2)" ed:width="78.008" id="350" ed:height="24.4" ed:layout="righttree" ed:parentid="344">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">动态组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,690.08,3861.35)" ed:width="91.608" id="360" ed:height="24.4" ed:layout="righttree" ed:parentid="344">
        <path d="M12.2,0L79.4,0C86.1,0,91.6,5.5,91.6,12.2C91.6,18.9,86.1,24.4,79.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">组件根节点</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,625.38,3895.5)" ed:width="194.008" id="362" ed:height="24.4" ed:layout="righttree" ed:parentid="336">
        <path d="M12.2,0L181.8,0C188.5,0,194,5.5,194,12.2C194,18.9,188.5,24.4,181.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">六个class,设置过渡动画效果</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,741.28,3929.65)" ed:width="50.80800000000001" id="364" ed:height="24.4" ed:layout="righttree" ed:parentid="362">
        <path d="M12.2,0L38.6,0C45.3,0,50.8,5.5,50.8,12.2C50.8,18.9,45.3,24.4,38.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">入场</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,741.28,4066.25)" ed:width="50.80800000000001" id="366" ed:height="24.4" ed:layout="righttree" ed:parentid="362">
        <path d="M12.2,0L38.6,0C45.3,0,50.8,5.5,50.8,12.2C50.8,18.9,45.3,24.4,38.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">出场</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,741.28,4202.85)" ed:width="78.008" id="368" ed:height="24.4" ed:layout="righttree" ed:parentid="362">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">使用步骤</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,785.59,3963.8)" ed:width="172.408" id="376" ed:height="24.4" ed:layout="righttree" ed:parentid="364">
        <path d="M12.2,0L160.2,0C166.9,0,172.4,5.5,172.4,12.2C172.4,18.9,166.9,24.4,160.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">v-enter: 入场前显示状态</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,785.59,3997.95)" ed:width="205.208" id="378" ed:height="24.4" ed:layout="righttree" ed:parentid="364">
        <path d="M12.2,0L193,0C199.7,0,205.2,5.5,205.2,12.2C205.2,18.9,199.7,24.4,193,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">v-enter-to: 入场结束显示状态</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,785.59,4032.1)" ed:width="362.0079999999999" id="380" ed:height="24.4" ed:layout="righttree" ed:parentid="364">
        <path d="M12.2,0L349.8,0C356.5,0,362,5.5,362,12.2C362,18.9,356.5,24.4,349.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">v-enter-active:入场过程控制，可设置持续事件，模式等</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,785.59,4100.4)" ed:width="132.408" id="382" ed:height="24.4" ed:layout="righttree" ed:parentid="366">
        <path d="M12.2,0L120.2,0C126.9,0,132.4,5.5,132.4,12.2C132.4,18.9,126.9,24.4,120.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">v-leave: 开始离开</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,785.59,4134.55)" ed:width="134.008" id="384" ed:height="24.4" ed:layout="righttree" ed:parentid="366">
        <path d="M12.2,0L121.8,0C128.5,0,134,5.5,134,12.2C134,18.9,128.5,24.4,121.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">v-leave-to:离开后</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,785.59,4168.7)" ed:width="176.408" id="386" ed:height="24.4" ed:layout="righttree" ed:parentid="366">
        <path d="M12.2,0L164.2,0C170.9,0,176.4,5.5,176.4,12.2C176.4,18.9,170.9,24.4,164.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">v-leave-active: 离场控制</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,799.19,4237)" ed:width="255.6079999999999" id="390" ed:height="24.4" ed:layout="righttree" ed:parentid="368">
        <path d="M12.2,0L243.4,0C250.1,0,255.6,5.5,255.6,12.2C255.6,18.9,250.1,24.4,243.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">1，待过渡元素包含在transition组件内</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,799.19,4271.15)" ed:width="344.408" id="392" ed:height="24.4" ed:layout="righttree" ed:parentid="368">
        <path d="M12.2,0L332.2,0C338.9,0,344.4,5.5,344.4,12.2C344.4,18.9,338.9,24.4,332.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">2，设置入场出场类名，关键，出入场始末的样式设置</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,799.19,4305.3)" ed:width="472.056" id="394" ed:height="42.8" ed:layout="righttree" ed:parentid="368">
        <path d="M21.4,0L450.7,0C462.5,0,472.1,9.6,472.1,21.4C472.1,33.2,462.5,42.8,450.7,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">注：过渡状态仅在元素过渡期间动画，但元素的显示与否并非过渡终点，</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">eg: v-leave-to: 0.5, 进场到0.5，元素稍后立即完全显示</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,625.38,4392)" ed:width="532.856" id="396" ed:height="42.8" ed:layout="righttree" ed:parentid="336">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">name属性，同一动画效果设置给多个组件eg: name="demo", 类名设</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">置：.demo(name属性绑定值)-enter</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,910.71,4444.55)" ed:width="303.256" id="398" ed:height="42.8" ed:layout="righttree" ed:parentid="396">
        <path d="M21.4,0L281.9,0C293.7,0,303.3,9.6,303.3,21.4C303.3,33.2,293.7,42.8,281.9,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">未设置name属性：过渡默认类名 v- 开头</tspan>
            <tspan x="17" y="34.9" style="white-space:pre"> 设置name属性：过渡默认类名 name- 开头</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,1054.12,4357.85)" ed:width="326.0079999999999" id="400" ed:height="24.4" ed:layout="righttree" ed:parentid="394">
        <path d="M12.2,0L313.8,0C320.5,0,326,5.5,326,12.2C326,18.9,320.5,24.4,313.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">前，中（active,设置动画样式属性transtion），后</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,625.38,4497.1)" ed:width="231.608" id="402" ed:height="24.4" ed:layout="righttree" ed:parentid="336">
        <path d="M12.2,0L219.4,0C226.1,0,231.6,5.5,231.6,12.2C231.6,18.9,226.1,24.4,219.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">appear属性，初始渲染时过渡效果</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,760.08,4531.25)" ed:width="227.608" id="404" ed:height="24.4" ed:layout="righttree" ed:parentid="402">
        <path d="M12.2,0L215.4,0C222.1,0,227.6,5.5,227.6,12.2C227.6,18.9,222.1,24.4,215.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">未设置时仅有几种触发方式的过渡</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,758.18,4599.55)" ed:width="78.008" id="406" ed:height="24.4" ed:layout="righttree" ed:parentid="338">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">过渡类名</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,758.18,4723.05)" ed:width="105.208" id="408" ed:height="24.4" ed:layout="righttree" ed:parentid="338">
        <path d="M12.2,0L93,0C99.7,0,105.2,5.5,105.2,12.2C105.2,18.9,99.7,24.4,93,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">初始过渡类名</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,816.08,4633.7)" ed:width="177.752" id="410" ed:height="79.59999999999999" ed:layout="righttree" ed:parentid="406">
        <path d="M39.8,0L138,0C159.9,0,177.8,17.8,177.8,39.8C177.8,61.8,159.9,79.6,138,79.6L39.8,79.6C17.8,79.6,0,61.8,0,39.8C0,17.8,17.8,0,39.8,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="30" y="16.5" style="white-space:pre">enter-class</tspan>
            <tspan x="30" y="34.9" style="white-space:pre">enter-active-class</tspan>
            <tspan x="30" y="53.3" style="white-space:pre">leave-class</tspan>
            <tspan x="30" y="71.7" style="white-space:pre">leave-to-class</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,829.68,4757.2)" ed:width="175.704" id="414" ed:height="61.2" ed:layout="righttree" ed:parentid="408">
        <path d="M30.6,0L145.1,0C162,0,175.7,13.7,175.7,30.6C175.7,47.5,162,61.2,145.1,61.2L30.6,61.2C13.7,61.2,0,47.5,0,30.6C0,13.7,13.7,0,30.6,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="23" y="16.5" style="white-space:pre">appear-class</tspan>
            <tspan x="23" y="34.9" style="white-space:pre">appear-active-class</tspan>
            <tspan x="23" y="53.3" style="white-space:pre">appear-to-class</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,758.18,4828.15)" ed:width="532.856" id="420" ed:height="42.8" ed:layout="righttree" ed:parentid="338">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">使用：过渡类名为过渡组件属性，值为自定义类名，同时设置同一类动画效果，自</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">定义会覆盖已有</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,758.18,4880.7)" ed:width="254.8079999999999" id="423" ed:height="24.4" ed:layout="righttree" ed:parentid="338">
        <path d="M12.2,0L242.6,0C249.3,0,254.8,5.5,254.8,12.2C254.8,18.9,249.3,24.4,242.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">第三方动画库结合过渡组件自定义类名</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,904.48,4914.85)" ed:width="484.952" id="425" ed:height="79.59999999999999" ed:layout="righttree" ed:parentid="423">
        <path d="M39.8,0L445.2,0C467.1,0,485,17.8,485,39.8C485,61.8,467.1,79.6,445.2,79.6L39.8,79.6C17.8,79.6,0,61.8,0,39.8C0,17.8,17.8,0,39.8,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="30" y="16.5" style="white-space:pre">注：</tspan>
            <tspan x="30" y="34.9" style="white-space:pre">1，过渡组件内应用动画的元素添加基础类名animate__animated</tspan>
            <tspan x="30" y="53.3" style="white-space:pre">2, 过渡组件自定义类名添加动画类名需添加animate__前缀</tspan>
            <tspan x="30" y="71.7" style="white-space:pre">3，4.4.1新版本有前缀，旧版本没有，旧迁新可使用compact兼容版本</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,702.18,5038.35)" ed:width="191.608" id="429" ed:height="24.4" ed:layout="righttree" ed:parentid="340">
        <path d="M12.2,0L179.4,0C186.1,0,191.6,5.5,191.6,12.2C191.6,18.9,186.1,24.4,179.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">1，tag设置容器元素，span</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,702.18,5106.65)" ed:width="229.208" id="431" ed:height="24.4" ed:layout="righttree" ed:parentid="340">
        <path d="M12.2,0L217,0C223.7,0,229.2,5.5,229.2,12.2C229.2,18.9,223.7,24.4,217,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">2, 过渡应用于内部元素，而非容器</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,702.18,5227.5)" ed:width="292.408" id="433" ed:height="24.4" ed:layout="righttree" ed:parentid="340">
        <path d="M12.2,0L280.2,0C286.9,0,292.4,5.5,292.4,12.2C292.4,18.9,286.9,24.4,280.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">3，子节点必须有独立key, 动画才能正常工作</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,816.88,5072.5)" ed:width="356.408" id="436" ed:height="24.4" ed:layout="righttree" ed:parentid="429">
        <path d="M12.2,0L344.2,0C350.9,0,356.4,5.5,356.4,12.2C356.4,18.9,350.9,24.4,344.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">transition组件非容器，设置的类名会应用到内部元素上</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,835.68,5140.8)" ed:width="239.608" id="438" ed:height="24.4" ed:layout="righttree" ed:parentid="431">
        <path d="M12.2,0L227.4,0C234.1,0,239.6,5.5,239.6,12.2C239.6,18.9,234.1,24.4,227.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">特有.v-move用于元素移动补位动画</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,974.39,5174.95)" ed:width="532.856" id="440" ed:height="42.8" ed:layout="righttree" ed:parentid="438">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">eg: li元素点击删除，后续li补位，.v-move设置动画属性transition, 待删除元素v-</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">leave-active设置待删除元素脱标</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,249.27,5336.45)" ed:width="78.008" id="442" ed:height="24.4" ed:layout="righttree" ed:parentid="104">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">单页应用</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,249.27,5746.25)" ed:width="199.608" id="444" ed:height="24.4" ed:layout="righttree" ed:parentid="104">
        <path d="M12.2,0L187.4,0C194.1,0,199.6,5.5,199.6,12.2C199.6,18.9,194.1,24.4,187.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">前端路由：URL与内容的映射</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,249.27,7326.35)" ed:width="156.408" id="446" ed:height="24.4" ed:layout="righttree" ed:parentid="104">
        <path d="M12.2,0L144.2,0C150.9,0,156.4,5.5,156.4,12.2C156.4,18.9,150.9,24.4,144.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">Vue router：vue插件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,307.17,5370.6)" ed:width="227.608" id="448" ed:height="24.4" ed:layout="righttree" ed:parentid="442">
        <path d="M12.2,0L215.4,0C222.1,0,227.6,5.5,227.6,12.2C227.6,18.9,222.1,24.4,215.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">概念：应用功能集中在单个页面中</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,307.17,5404.75)" ed:width="64.408" id="450" ed:height="24.4" ed:layout="righttree" ed:parentid="442">
        <path d="M12.2,0L52.2,0C58.9,0,64.4,5.5,64.4,12.2C64.4,18.9,58.9,24.4,52.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">优点：</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,307.17,5541.35)" ed:width="64.408" id="452" ed:height="24.4" ed:layout="righttree" ed:parentid="442">
        <path d="M12.2,0L52.2,0C58.9,0,64.4,5.5,64.4,12.2C64.4,18.9,58.9,24.4,52.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">缺点：</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,358.28,5438.9)" ed:width="208.408" id="454" ed:height="24.4" ed:layout="righttree" ed:parentid="450">
        <path d="M12.2,0L196.2,0C202.9,0,208.4,5.5,208.4,12.2C208.4,18.9,202.9,24.4,196.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">1，前后端分离，提高开发效率</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,358.28,5473.05)" ed:width="222.008" id="456" ed:height="24.4" ed:layout="righttree" ed:parentid="450">
        <path d="M12.2,0L209.8,0C216.5,0,222,5.5,222,12.2C222,18.9,216.5,24.4,209.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">2，业务场景切换，局部刷新结构</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,358.28,5507.2)" ed:width="235.608" id="458" ed:height="24.4" ed:layout="righttree" ed:parentid="450">
        <path d="M12.2,0L223.4,0C230.1,0,235.6,5.5,235.6,12.2C235.6,18.9,230.1,24.4,223.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">3，用户体验好，更加接近本地应用</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,358.28,5575.5)" ed:width="112.408" id="461" ed:height="24.4" ed:layout="righttree" ed:parentid="452">
        <path d="M12.2,0L100.2,0C106.9,0,112.4,5.5,112.4,12.2C112.4,18.9,106.9,24.4,100.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">1，不利于SEO</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,358.28,5643.8)" ed:width="161.208" id="463" ed:height="24.4" ed:layout="righttree" ed:parentid="452">
        <path d="M12.2,0L149,0C155.7,0,161.2,5.5,161.2,12.2C161.2,18.9,155.7,24.4,149,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">2, 初次首屏加载速度慢</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,358.28,5712.1)" ed:width="154.008" id="465" ed:height="24.4" ed:layout="righttree" ed:parentid="452">
        <path d="M12.2,0L141.8,0C148.5,0,154,5.5,154,12.2C154,18.9,148.5,24.4,141.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">3，页面复杂度比较高</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,433.38,5609.65)" ed:width="234.008" id="467" ed:height="24.4" ed:layout="righttree" ed:parentid="461">
        <path d="M12.2,0L221.8,0C228.5,0,234,5.5,234,12.2C234,18.9,228.5,24.4,221.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">单页应用，数据大多通过AJAX获取</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,457.78,5677.95)" ed:width="118.808" id="469" ed:height="24.4" ed:layout="righttree" ed:parentid="463">
        <path d="M12.2,0L106.6,0C113.3,0,118.8,5.5,118.8,12.2C118.8,18.9,113.3,24.4,106.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">多功能资源集中</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,367.97,5780.4)" ed:width="50.80800000000001" id="471" ed:height="24.4" ed:layout="righttree" ed:parentid="444">
        <path d="M12.2,0L38.6,0C45.3,0,50.8,5.5,50.8,12.2C50.8,18.9,45.3,24.4,38.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">实现</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,412.28,5814.55)" ed:width="55.608" id="473" ed:height="24.4" ed:layout="righttree" ed:parentid="471">
        <path d="M12.2,0L43.4,0C50.1,0,55.6,5.5,55.6,12.2C55.6,18.9,50.1,24.4,43.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">Hash</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,412.28,6320.55)" ed:width="70.008" id="475" ed:height="24.4" ed:layout="righttree" ed:parentid="471">
        <path d="M12.2,0L57.8,0C64.5,0,70,5.5,70,12.2C70,18.9,64.5,24.4,57.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">History</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,458.98,5848.7)" ed:width="405.208" id="477" ed:height="24.4" ed:layout="righttree" ed:parentid="473">
        <path d="M12.2,0L393,0C399.7,0,405.2,5.5,405.2,12.2C405.2,18.9,399.7,24.4,393,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">概念：通过hashchange事件监听hash变化,并进行页面内容刷新</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,680.48,5882.85)" ed:width="390.8079999999999" id="479" ed:height="24.4" ed:layout="righttree" ed:parentid="477">
        <path d="M12.2,0L378.6,0C385.3,0,390.8,5.5,390.8,12.2C390.8,18.9,385.3,24.4,378.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">关键：location.hash 获取hash变动，根据变动操作dom内容</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,458.98,6183.95)" ed:width="64.408" id="481" ed:height="24.4" ed:layout="righttree" ed:parentid="473">
        <path d="M12.2,0L52.2,0C58.9,0,64.4,5.5,64.4,12.2C64.4,18.9,58.9,24.4,52.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">特点：</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,510.08,6218.1)" ed:width="267.6079999999999" id="483" ed:height="24.4" ed:layout="righttree" ed:parentid="481">
        <path d="M12.2,0L255.4,0C262.1,0,267.6,5.5,267.6,12.2C267.6,18.9,262.1,24.4,255.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">1，Hash方式兼容好，利用锚点元素形式</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,510.08,6252.25)" ed:width="159.608" id="485" ed:height="24.4" ed:layout="righttree" ed:parentid="481">
        <path d="M12.2,0L147.4,0C154.1,0,159.6,5.5,159.6,12.2C159.6,18.9,154.1,24.4,147.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">2，url有#, 相对不美观</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,510.08,6286.4)" ed:width="167.608" id="487" ed:height="24.4" ed:layout="righttree" ed:parentid="481">
        <path d="M12.2,0L155.4,0C162.1,0,167.6,5.5,167.6,12.2C167.6,18.9,162.1,24.4,155.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">3，实现前进，后退复杂</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,458.98,5917)" ed:width="464.824" id="489" ed:height="257.2" ed:layout="righttree" ed:parentid="473">
        <path d="M128.6,0L336.2,0C407.2,0,464.8,57.6,464.8,128.6C464.8,199.6,407.2,257.2,336.2,257.2L128.6,257.2C57.6,257.2,0,199.6,0,128.6C0,57.6,57.6,0,128.6,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <image x="75" xlink:href="" height="232.8" id="shape1" y="33" width="273.6"/>
        <text class="st3">
            <tspan x="94" y="16.4" style="white-space:pre">实现：</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,466.18,6354.7)" ed:width="361.208" id="491" ed:height="24.4" ed:layout="righttree" ed:parentid="475">
        <path d="M12.2,0L349,0C355.7,0,361.2,5.5,361.2,12.2C361.2,18.9,355.7,24.4,349,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">概念：通过history.pushState()变更URL并执行响应操作</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,466.18,6388.85)" ed:width="458.4879999999999" id="493" ed:height="228.4" ed:layout="righttree" ed:parentid="475">
        <path d="M114.2,0L344.3,0C407.4,0,458.5,51.1,458.5,114.2C458.5,177.3,407.4,228.4,344.3,228.4L114.2,228.4C51.1,228.4,0,177.3,0,114.2C0,51.1,51.1,0,114.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <image x="67" xlink:href="" height="204" id="shape2" y="33" width="288"/>
        <text class="st3">
            <tspan x="84" y="16.4" style="white-space:pre">实现：</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,466.18,7103.05)" ed:width="64.408" id="495" ed:height="24.4" ed:layout="righttree" ed:parentid="475">
        <path d="M12.2,0L52.2,0C58.9,0,64.4,5.5,64.4,12.2C64.4,18.9,58.9,24.4,52.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">特点：</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,714.32,6627)" ed:width="308.504" id="497" ed:height="61.2" ed:layout="righttree" ed:parentid="493">
        <path d="M30.6,0L277.9,0C294.8,0,308.5,13.7,308.5,30.6C308.5,47.5,294.8,61.2,277.9,61.2L30.6,61.2C13.7,61.2,0,47.5,0,30.6C0,13.7,13.7,0,30.6,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="23" y="16.5" style="white-space:pre">注：</tspan>
            <tspan x="23" y="34.9" style="white-space:pre">1，采用pushState方法；</tspan>
            <tspan x="23" y="53.3" style="white-space:pre">2，a标签调用getAttribute('href')获取路劲</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,517.28,7137.2)" ed:width="210.008" id="499" ed:height="24.4" ed:layout="righttree" ed:parentid="495">
        <path d="M12.2,0L197.8,0C204.5,0,210,5.5,210,12.2C210,18.9,204.5,24.4,197.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">1，histoy,新标准，有兼容问题</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,517.28,7171.35)" ed:width="111.608" id="501" ed:height="24.4" ed:layout="righttree" ed:parentid="495">
        <path d="M12.2,0L99.4,0C106.1,0,111.6,5.5,111.6,12.2C111.6,18.9,106.1,24.4,99.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">2，无#,较美观</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,517.28,7205.5)" ed:width="202.808" id="503" ed:height="24.4" ed:layout="righttree" ed:parentid="495">
        <path d="M12.2,0L190.6,0C197.3,0,202.8,5.5,202.8,12.2C202.8,18.9,197.3,24.4,190.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">3，hash,2k, history方式640k</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,517.28,7239.65)" ed:width="310.8079999999999" id="505" ed:height="24.4" ed:layout="righttree" ed:parentid="495">
        <path d="M12.2,0L298.6,0C305.3,0,310.8,5.5,310.8,12.2C310.8,18.9,305.3,24.4,298.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">4, 刷新页面会导致访问错误，需后端开发者支持</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,466.18,6697.95)" ed:width="593.6559999999999" id="507" ed:height="342.8" ed:layout="righttree" ed:parentid="475">
        <path d="M171.4,0L422.3,0C516.9,0,593.7,76.7,593.7,171.4C593.7,266.1,516.9,342.8,422.3,342.8L171.4,342.8C76.7,342.8,0,266.1,0,171.4C0,76.7,76.7,0,171.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <image x="100" xlink:href="" height="318.4" id="shape3" y="33" width="340.8"/>
        <text class="st3">
            <tspan x="125" y="16.4" style="white-space:pre">优化实现：</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,781.91,7050.5)" ed:width="532.856" id="509" ed:height="42.8" ed:layout="righttree" ed:parentid="507">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">增加路由前进后退功能，关键，popstate方法，pushState方法第一个参数，保留</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">当前路由信息</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,691.59,7273.8)" ed:width="532.856" id="511" ed:height="42.8" ed:layout="righttree" ed:parentid="505">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">原因：pushState并没有真正跳转页面，仅仅改变url, 服务器没有该资源地址，会访</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">问错误</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,346.37,7360.5)" ed:width="78.008" id="513" ed:height="24.4" ed:layout="righttree" ed:parentid="446">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">基本使用</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,346.37,7841.25)" ed:width="78.008" id="515" ed:height="24.4" ed:layout="righttree" ed:parentid="446">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">动态路由</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,346.37,8235.3)" ed:width="78.008" id="517" ed:height="24.4" ed:layout="righttree" ed:parentid="446">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">嵌套路由</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,346.37,8303.6)" ed:width="214.008" id="519" ed:height="24.4" ed:layout="righttree" ed:parentid="446">
        <path d="M12.2,0L201.8,0C208.5,0,214,5.5,214,12.2C214,18.9,208.5,24.4,201.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">编程式导航：通过方法设置导航</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,404.28,7394.65)" ed:width="131.608" id="522" ed:height="24.4" ed:layout="righttree" ed:parentid="513">
        <path d="M12.2,0L119.4,0C126.1,0,131.6,5.5,131.6,12.2C131.6,18.9,126.1,24.4,119.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">引入：CDN, npm</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,404.28,7428.8)" ed:width="105.208" id="524" ed:height="24.4" ed:layout="righttree" ed:parentid="513">
        <path d="M12.2,0L93,0C99.7,0,105.2,5.5,105.2,12.2C105.2,18.9,99.7,24.4,93,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">路由设置组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,475.78,7462.95)" ed:width="181.208" id="526" ed:height="24.4" ed:layout="righttree" ed:parentid="524">
        <path d="M12.2,0L169,0C175.7,0,181.2,5.5,181.2,12.2C181.2,18.9,175.7,24.4,169,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">&lt;router-link>: 默认a标签</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,475.78,7497.1)" ed:width="241.208" id="528" ed:height="24.4" ed:layout="righttree" ed:parentid="524">
        <path d="M12.2,0L229,0C235.7,0,241.2,5.5,241.2,12.2C241.2,18.9,235.7,24.4,229,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">&lt;router-view>：内容切换显示区域</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,404.28,7531.25)" ed:width="78.008" id="530" ed:height="24.4" ed:layout="righttree" ed:parentid="513">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">定义步骤</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,462.18,7565.4)" ed:width="126.808" id="532" ed:height="24.4" ed:layout="righttree" ed:parentid="530">
        <path d="M12.2,0L114.6,0C121.3,0,126.8,5.5,126.8,12.2C126.8,18.9,121.3,24.4,114.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">1，定义路由规则</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,462.18,7599.55)" ed:width="324.856" id="534" ed:height="42.8" ed:layout="righttree" ed:parentid="530">
        <path d="M21.4,0L303.5,0C315.3,0,324.9,9.6,324.9,21.4C324.9,33.2,315.3,42.8,303.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">2，创建VueRouter实例 </tspan>
            <tspan x="17" y="34.9" style="white-space:pre">var router = new VueRouter({routes: routes})</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,462.18,7652.1)" ed:width="239.608" id="536" ed:height="24.4" ed:layout="righttree" ed:parentid="530">
        <path d="M12.2,0L227.4,0C234.1,0,239.6,5.5,239.6,12.2C239.6,18.9,234.1,24.4,227.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">3, Vue实例选项router值为路由实例</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,404.28,7686.25)" ed:width="78.008" id="538" ed:height="24.4" ed:layout="righttree" ed:parentid="513">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">命名视图</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,462.18,7720.4)" ed:width="214.008" id="540" ed:height="24.4" ed:layout="righttree" ed:parentid="538">
        <path d="M12.2,0L201.8,0C208.5,0,214,5.5,214,12.2C214,18.9,208.5,24.4,201.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">作用：导航后显示多个同级组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,462.18,7754.55)" ed:width="50.80800000000001" id="542" ed:height="24.4" ed:layout="righttree" ed:parentid="538">
        <path d="M12.2,0L38.6,0C45.3,0,50.8,5.5,50.8,12.2C50.8,18.9,45.3,24.4,38.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">使用</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,506.48,7788.7)" ed:width="349.656" id="544" ed:height="42.8" ed:layout="righttree" ed:parentid="542">
        <path d="M21.4,0L328.3,0C340.1,0,349.7,9.6,349.7,21.4C349.7,33.2,340.1,42.8,328.3,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">路由中使用components属性设置不同视图对用组件</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">形式：components: { "命名视图": "组件名" }</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,404.28,7875.4)" ed:width="203.608" id="546" ed:height="24.4" ed:layout="righttree" ed:parentid="515">
        <path d="M12.2,0L191.4,0C198.1,0,203.6,5.5,203.6,12.2C203.6,18.9,198.1,24.4,191.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">概念：某类url映射到同一组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,404.28,7943.7)" ed:width="506.0079999999999" id="548" ed:height="24.4" ed:layout="righttree" ed:parentid="515">
        <path d="M12.2,0L493.8,0C500.5,0,506,5.5,506,12.2C506,18.9,500.5,24.4,493.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">使用：路由配置中使用' : '标记，对应信息为路劲参数，在$router.params可访问</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,524.98,7909.55)" ed:width="350.0079999999999" id="550" ed:height="24.4" ed:layout="righttree" ed:parentid="546">
        <path d="M12.2,0L337.8,0C344.5,0,350,5.5,350,12.2C350,18.9,344.5,24.4,337.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">动态路由切换不重新创建，可使用侦听器监听路由变化</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,404.28,7977.85)" ed:width="105.208" id="552" ed:height="24.4" ed:layout="righttree" ed:parentid="515">
        <path d="M12.2,0L93,0C99.7,0,105.2,5.5,105.2,12.2C105.2,18.9,99.7,24.4,93,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">路由传参处理</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,475.78,8012)" ed:width="444.408" id="554" ed:height="24.4" ed:layout="righttree" ed:parentid="552">
        <path d="M12.2,0L432.2,0C438.9,0,444.4,5.5,444.4,12.2C444.4,18.9,438.9,24.4,432.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">供单个组件使用：直接使用路由路径/:id传参，$router.params.id接收</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,475.78,8046.15)" ed:width="532.856" id="556" ed:height="42.8" ed:layout="righttree" ed:parentid="552">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">供多个组件使用：路由路径/:id,路由props属性传递, props: true，组件props接收, </tspan>
            <tspan x="17" y="34.9" style="white-space:pre">['id']</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,761.11,8098.7)" ed:width="339.6079999999999" id="558" ed:height="24.4" ed:layout="righttree" ed:parentid="556">
        <path d="M12.2,0L327.4,0C334.1,0,339.6,5.5,339.6,12.2C339.6,18.9,334.1,24.4,327.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">既有props接收值，也可使用在路由对象params获取</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,475.78,8132.85)" ed:width="518.808" id="560" ed:height="24.4" ed:layout="righttree" ed:parentid="552">
        <path d="M12.2,0L506.6,0C513.3,0,518.8,5.5,518.8,12.2C518.8,18.9,513.3,24.4,506.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">包含多个命名视图时，props设置为对象，设置需要props接收数据的组件设置true</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,754.08,8167)" ed:width="486.0079999999999" id="562" ed:height="24.4" ed:layout="righttree" ed:parentid="560">
        <path d="M12.2,0L473.8,0C480.5,0,486,5.5,486,12.2C486,18.9,480.5,24.4,473.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">若需设置静态数据，组件对应选项不适用布尔值，而是使用对象传入静态数据</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,1015.99,8201.15)" ed:width="211.608" id="564" ed:height="24.4" ed:layout="righttree" ed:parentid="562">
        <path d="M12.2,0L199.4,0C206.1,0,211.6,5.5,211.6,12.2C211.6,18.9,206.1,24.4,199.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">注：动态绑定的id(:id)不再生效</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,404.28,8269.45)" ed:width="158.008" id="566" ed:height="24.4" ed:layout="righttree" ed:parentid="517">
        <path d="M12.2,0L145.8,0C152.5,0,158,5.5,158,12.2C158,18.9,152.5,24.4,145.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">children属性进行设置</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,472.28,8337.75)" ed:width="306.8079999999999" id="568" ed:height="24.4" ed:layout="righttree" ed:parentid="519">
        <path d="M12.2,0L294.6,0C301.3,0,306.8,5.5,306.8,12.2C306.8,18.9,301.3,24.4,294.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">使用$router.push()方法（注：与$route区分）</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,644.58,8371.9)" ed:width="167.608" id="570" ed:height="24.4" ed:layout="righttree" ed:parentid="568">
        <path d="M12.2,0L155.4,0C162.1,0,167.6,5.5,167.6,12.2C167.6,18.9,162.1,24.4,155.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">参数形式1：路径字符串</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,644.58,8406.05)" ed:width="154.008" id="572" ed:height="24.4" ed:layout="righttree" ed:parentid="568">
        <path d="M12.2,0L141.8,0C148.5,0,154,5.5,154,12.2C154,18.9,148.5,24.4,141.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">参数形式2：对象形式</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,644.58,8440.2)" ed:width="474.8079999999999" id="574" ed:height="24.4" ed:layout="righttree" ed:parentid="568">
        <path d="M12.2,0L462.6,0C469.3,0,474.8,5.5,474.8,12.2C474.8,18.9,469.3,24.4,462.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">注：组件&lt;router-link :to="">, 动态绑定to属性，也可以设置对象形式参数</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,472.28,8474.35)" ed:width="78.008" id="576" ed:height="24.4" ed:layout="righttree" ed:parentid="519">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">命名路由</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,530.18,8508.5)" ed:width="270.008" id="578" ed:height="24.4" ed:layout="righttree" ed:parentid="576">
        <path d="M12.2,0L257.8,0C264.5,0,270,5.5,270,12.2C270,18.9,264.5,24.4,257.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">概念：使用路由name导航，params传参</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,530.18,8576.8)" ed:width="227.608" id="580" ed:height="24.4" ed:layout="righttree" ed:parentid="576">
        <path d="M12.2,0L215.4,0C222.1,0,227.6,5.5,227.6,12.2C227.6,18.9,222.1,24.4,215.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">作用：应对嵌套路由可能过长路径</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,530.18,8610.95)" ed:width="406.456" id="582" ed:height="42.8" ed:layout="righttree" ed:parentid="576">
        <path d="M21.4,0L385.1,0C396.9,0,406.5,9.6,406.5,21.4C406.5,33.2,396.9,42.8,385.1,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">使用：路由配置定义name选项，组件中调用</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">$router.push({name: any, params:{}})或动态绑定属性to导航</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,684.08,8542.65)" ed:width="214.008" id="584" ed:height="24.4" ed:layout="righttree" ed:parentid="578">
        <path d="M12.2,0L201.8,0C208.5,0,214,5.5,214,12.2C214,18.9,208.5,24.4,201.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">利用编程时路由实现，故，可用</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,346.37,8663.5)" ed:width="400.408" id="586" ed:height="24.4" ed:layout="righttree" ed:parentid="446">
        <path d="M12.2,0L388.2,0C394.9,0,400.4,5.5,400.4,12.2C400.4,18.9,394.9,24.4,388.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">重定向：避免访问到不合理路径，使用：路由配置选项redirect</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,346.37,8697.65)" ed:width="421.208" id="588" ed:height="24.4" ed:layout="righttree" ed:parentid="446">
        <path d="M12.2,0L409,0C415.7,0,421.2,5.5,421.2,12.2C421.2,18.9,415.7,24.4,409,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">别名：美化地址栏url地址，实际访问别名代表的较复杂的实际地址</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,346.37,8971.85)" ed:width="78.008" id="590" ed:height="24.4" ed:layout="righttree" ed:parentid="446">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">导航守卫</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,575.88,8731.8)" ed:width="161.208" id="592" ed:height="24.4" ed:layout="righttree" ed:parentid="588">
        <path d="M12.2,0L149,0C155.7,0,161.2,5.5,161.2,12.2C161.2,18.9,155.7,24.4,149,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">使用：路由配置项alias</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,675.38,8765.95)" ed:width="347.032" id="594" ed:height="123.6" ed:layout="righttree" ed:parentid="592">
        <path d="M61.8,0L285.2,0C319.4,0,347,27.7,347,61.8C347,95.9,319.4,123.6,285.2,123.6L61.8,123.6C27.7,123.6,0,95.9,0,61.8C0,27.7,27.7,0,61.8,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <image x="37" xlink:href="" height="99.2" id="shape4" y="33" width="252"/>
        <text class="st3">
            <tspan x="46" y="16.5" style="white-space:pre">定义：</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,675.38,8899.3)" ed:width="491.256" id="596" ed:height="62.8" ed:layout="righttree" ed:parentid="592">
        <path d="M31.4,0L459.9,0C477.2,0,491.3,14.1,491.3,31.4C491.3,48.7,477.2,62.8,459.9,62.8L31.4,62.8C14.1,62.8,0,48.7,0,31.4C0,14.1,14.1,0,31.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <image x="19" xlink:href="" height="38.4" id="shape5" y="33" width="440"/>
        <text class="st3">
            <tspan x="24" y="16.5" style="white-space:pre">命名式路由简化：</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,404.28,9006)" ed:width="159.608" id="598" ed:height="24.4" ed:layout="righttree" ed:parentid="590">
        <path d="M12.2,0L147.4,0C154.1,0,159.6,5.5,159.6,12.2C159.6,18.9,154.1,24.4,147.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">概念：对路由拦截处理</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,404.28,9040.15)" ed:width="241.208" id="600" ed:height="24.4" ed:layout="righttree" ed:parentid="590">
        <path d="M12.2,0L229,0C235.7,0,241.2,5.5,241.2,12.2C241.2,18.9,235.7,24.4,229,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">使用：拦截路由跳转，进行特定操作</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,543.78,9074.3)" ed:width="312.408" id="602" ed:height="24.4" ed:layout="righttree" ed:parentid="600">
        <path d="M12.2,0L300.2,0C306.9,0,312.4,5.5,312.4,12.2C312.4,18.9,306.9,24.4,300.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">router.beforeEach(function(to, from, next) {})</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,718.88,9108.45)" ed:width="296.408" id="604" ed:height="24.4" ed:layout="righttree" ed:parentid="602">
        <path d="M12.2,0L284.2,0C290.9,0,296.4,5.5,296.4,12.2C296.4,18.9,290.9,24.4,284.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">关键：next可传值，与$router.push功能类似</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,885.99,9142.6)" ed:width="197.208" id="606" ed:height="24.4" ed:layout="righttree" ed:parentid="604">
        <path d="M12.2,0L185,0C191.7,0,197.2,5.5,197.2,12.2C197.2,18.9,191.7,24.4,185,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">false: 拦截当前路由，不跳转</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,885.99,9176.75)" ed:width="159.608" id="608" ed:height="24.4" ed:layout="righttree" ed:parentid="604">
        <path d="M12.2,0L147.4,0C154.1,0,159.6,5.5,159.6,12.2C159.6,18.9,154.1,24.4,147.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">路径字符串：跳转对象</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,346.37,9210.9)" ed:width="293.208" id="612" ed:height="24.4" ed:layout="righttree" ed:parentid="446">
        <path d="M12.2,0L281,0C287.7,0,293.2,5.5,293.2,12.2C293.2,18.9,287.7,24.4,281,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">History模式：路由实例选项mode: "history"</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,232.07,9319.85)" ed:width="312.408" id="614" ed:height="24.4" ed:layout="righttree" ed:parentid="106">
        <path d="M12.2,0L300.2,0C306.9,0,312.4,5.5,312.4,12.2C312.4,18.9,306.9,24.4,300.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">概念: 基于vue.js快速开发系统，称为脚手架工具</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,232.07,9354)" ed:width="193.752" id="616" ed:height="79.59999999999999" ed:layout="righttree" ed:parentid="106">
        <path d="M39.8,0L154,0C175.9,0,193.8,17.8,193.8,39.8C193.8,61.8,175.9,79.6,154,79.6L39.8,79.6C17.8,79.6,0,61.8,0,39.8C0,17.8,17.8,0,39.8,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="30" y="16.5" style="white-space:pre">作用：</tspan>
            <tspan x="30" y="34.9" style="white-space:pre">1，统一项目架构风格</tspan>
            <tspan x="30" y="53.3" style="white-space:pre">2，初始化项目依赖</tspan>
            <tspan x="30" y="71.7" style="white-space:pre">3，提供单文件组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,232.07,9443.35)" ed:width="78.008" id="618" ed:height="24.4" ed:layout="righttree" ed:parentid="106">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">主要内容</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,289.97,9477.5)" ed:width="50.80800000000001" id="620" ed:height="24.4" ed:layout="righttree" ed:parentid="618">
        <path d="M12.2,0L38.6,0C45.3,0,50.8,5.5,50.8,12.2C50.8,18.9,45.3,24.4,38.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">安装</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,289.97,9511.65)" ed:width="78.008" id="622" ed:height="24.4" ed:layout="righttree" ed:parentid="618">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">项目搭建</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,289.97,9648.25)" ed:width="91.608" id="624" ed:height="24.4" ed:layout="righttree" ed:parentid="618">
        <path d="M12.2,0L79.4,0C86.1,0,91.6,5.5,91.6,12.2C91.6,18.9,86.1,24.4,79.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">目录与文件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,289.97,9992.4)" ed:width="78.008" id="626" ed:height="24.4" ed:layout="righttree" ed:parentid="618">
        <path d="M12.2,0L65.8,0C72.5,0,78,5.5,78,12.2C78,18.9,72.5,24.4,65.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">打包部署</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,347.88,9545.8)" ed:width="142.008" id="628" ed:height="24.4" ed:layout="righttree" ed:parentid="622">
        <path d="M12.2,0L129.8,0C136.5,0,142,5.5,142,12.2C142,18.9,136.5,24.4,129.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">vue create '项目名'</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,347.88,9579.95)" ed:width="404.408" id="630" ed:height="24.4" ed:layout="righttree" ed:parentid="622">
        <path d="M12.2,0L392.2,0C398.9,0,404.4,5.5,404.4,12.2C404.4,18.9,398.9,24.4,392.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">预设选项：手动选取所需依赖，并可存为下次项目创建模板选项</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,568.98,9614.1)" ed:width="384.408" id="632" ed:height="24.4" ed:layout="righttree" ed:parentid="630">
        <path d="M12.2,0L372.2,0C378.9,0,384.4,5.5,384.4,12.2C384.4,18.9,378.9,24.4,372.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">课程搭建关键：手动选取依赖，babel,eslint等单独文件存放</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,354.68,9682.4)" ed:width="396.408" id="636" ed:height="24.4" ed:layout="righttree" ed:parentid="624">
        <path d="M12.2,0L384.2,0C390.9,0,396.4,5.5,396.4,12.2C396.4,18.9,390.9,24.4,384.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">public---预览文件目录，项目创建的单文件html页面存放处，</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,354.68,9716.55)" ed:width="161.208" id="638" ed:height="24.4" ed:layout="righttree" ed:parentid="624">
        <path d="M12.2,0L149,0C155.7,0,161.2,5.5,161.2,12.2C161.2,18.9,155.7,24.4,149,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">assets---静态资源目录</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,354.68,9750.7)" ed:width="266.008" id="640" ed:height="24.4" ed:layout="righttree" ed:parentid="624">
        <path d="M12.2,0L253.8,0C260.5,0,266,5.5,266,12.2C266,18.9,260.5,24.4,253.8,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">components--项目组件目录，存放组件</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,354.68,9784.85)" ed:width="183.608" id="643" ed:height="24.4" ed:layout="righttree" ed:parentid="624">
        <path d="M12.2,0L171.4,0C178.1,0,183.6,5.5,183.6,12.2C183.6,18.9,178.1,24.4,171.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">App.vue--根组件，根实例</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,354.68,9819)" ed:width="262.8079999999999" id="645" ed:height="24.4" ed:layout="righttree" ed:parentid="624">
        <path d="M12.2,0L250.6,0C257.3,0,262.8,5.5,262.8,12.2C262.8,18.9,257.3,24.4,250.6,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">main.js---入口文件，项目功能基础配置</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,354.68,9958.25)" ed:width="468.408" id="647" ed:height="24.4" ed:layout="righttree" ed:parentid="624">
        <path d="M12.2,0L456.2,0C462.9,0,468.4,5.5,468.4,12.2C468.4,18.9,462.9,24.4,456.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">单文件组件：将组件模板，逻辑，样式功能保存在以vue为拓展名的文件中</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,504.98,9853.15)" ed:width="532.856" id="651" ed:height="42.8" ed:layout="righttree" ed:parentid="645">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">关键，挂载dom, 并执行vue实例render选项方法内部定义函数h, 通过h(App)将根</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">组件渲染为dom</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,790.31,9905.7)" ed:width="532.856" id="653" ed:height="42.8" ed:layout="righttree" ed:parentid="651">
        <path d="M21.4,0L511.5,0C523.3,0,532.9,9.6,532.9,21.4C532.9,33.2,523.3,42.8,511.5,42.8L21.4,42.8C9.6,42.8,0,33.2,0,21.4C0,9.6,9.6,0,21.4,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="17" y="16.5" style="white-space:pre">CLI创建的项目vue实例与组件分离,并不存在dom结构，需要通过render选项将根</tspan>
            <tspan x="17" y="34.9" style="white-space:pre">组件App配置渲染为dom进行挂载</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,317.88,304.15)" ed:width="227.608" id="655" ed:height="24.4" ed:layout="righttree" ed:parentid="120">
        <path d="M12.2,0L215.4,0C222.1,0,227.6,5.5,227.6,12.2C227.6,18.9,222.1,24.4,215.4,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">组件内部定义，仅当前组件中可用</tspan>
        </text>
    </g>
    <g transform="matrix(1,0,0,1,409.78,1846.2)" ed:width="352.408" id="657" ed:height="24.4" ed:layout="righttree" ed:parentid="148">
        <path d="M12.2,0L340.2,0C346.9,0,352.4,5.5,352.4,12.2C352.4,18.9,346.9,24.4,340.2,24.4L12.2,24.4C5.5,24.4,0,18.9,0,12.2C0,5.5,5.5,0,12.2,0z" stroke-linejoin="round" stroke="#e3e3e3" fill="none"/>
        <text class="st3">
            <tspan x="10" y="16.4" style="white-space:pre">核心：emit方法自定义事件（也可使用原生事件）传值</tspan>
        </text>
    </g>
</svg>
</div>
        <div id="copyright">Created With  <a href="https://www.edrawsoft.com/" target="_blank" title="edrawsoft">MindMaster</a></div>
      </div>
    </div>
    <script>eval(atob('dmFyIG11YSA9IHdpbmRvdy5uYXZpZ2F0b3IudXNlckFnZW50Ow0KdmFyIHVhID0gKG11YS5pbmRleE9mKCdydjoxMScpICsgbXVhLmluZGV4T2YoJ01TSUUnKSkgPj0gMDsNCmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdzdmctY29udGFpbmVyJykub25jb250ZXh0bWVudSA9IGZ1bmN0aW9uIChldmVudCkgew0KICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7DQp9DQpkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc3ZnLWNvbnRhaW5lcicpLm9ubW91c2Vkb3duID0gZnVuY3Rpb24gKGV2ZW50KSB7DQogICAgaWYgKGV2ZW50LndoaWNoID09IDMpIHsNCiAgICAgICAgdGhpcy5zdHlsZS5jdXJzb3IgPSAncG9pbnRlcic7DQogICAgICAgIHRoaXMub25tb3VzZW1vdmUgPSBmdW5jdGlvbiAoZXYpIHsNCiAgICAgICAgICAgIHRoaXMuc2Nyb2xsQnkoLShldi5tb3ZlbWVudFgpLCAwKTsNCiAgICAgICAgICAgIHdpbmRvdy5zY3JvbGxCeSgwLCAtKGV2Lm1vdmVtZW50WSkpDQogICAgICAgIH0NCiAgICAgICAgdGhpcy5vbm1vdXNldXAgPSBmdW5jdGlvbiAoKSB7DQogICAgICAgICAgICB0aGlzLnN0eWxlLmN1cnNvciA9IG51bGw7DQogICAgICAgICAgICB0aGlzLm9ubW91c2V1cCA9IG51bGw7DQogICAgICAgICAgICB0aGlzLm9ubW91c2Vtb3ZlID0gbnVsbDsNCiAgICAgICAgfQ0KICAgIH0NCn0NCk51bWJlci5wcm90b3R5cGUudG9zdWl0c3ZnID0gZnVuY3Rpb24gKCkgew0KICAgIHZhciBudW0gPSB0aGlzLnZhbHVlT2YoKTsNCiAgICBpZiAobnVtICUgMSA9PT0gMCkgew0KICAgICAgICByZXR1cm4gbnVtICsgMC41DQogICAgfSBlbHNlIHJldHVybiBudW07DQp9Ow0KTnVtYmVyLnByb3RvdHlwZS5wbHVzeiA9IGZ1bmN0aW9uICgpIHsNCiAgICB2YXIgbnVtID0gdGhpcy52YWx1ZU9mKCk7DQogICAgcmV0dXJuIG51bSA8IDEwID8gJzAnICsgbnVtIDogbnVtOw0KfTsNCmZ1bmN0aW9uIHBhcnNlRGF0ZShudW0pIHsNCiAgICB2YXIgZGF0ZSA9IG5ldyBEYXRlKG51bSk7DQogICAgdmFyIFkgPSBkYXRlLmdldEZ1bGxZZWFyKCkgKyAnLSc7DQogICAgdmFyIE0gPSAoZGF0ZS5nZXRNb250aCgpICsgMSkucGx1c3ooKSArICctJzsNCiAgICB2YXIgRCA9IGRhdGUuZ2V0RGF0ZSgpLnBsdXN6KCkgKyAnICc7DQogICAgdmFyIGggPSBkYXRlLmdldEhvdXJzKCkucGx1c3ooKSArICc6JzsNCiAgICB2YXIgbW0gPSBkYXRlLmdldE1pbnV0ZXMoKS5wbHVzeigpICsgJzonOw0KICAgIHZhciBzID0gZGF0ZS5nZXRTZWNvbmRzKCkucGx1c3ooKTsNCiAgICByZXR1cm4gWSArIE0gKyBEICsgaCArIG1tICsgczsNCn0NCi8vLS1wcmVkZWZpbmVkDQovL2NvbW1lbnQtLQ0KDQpmdW5jdGlvbiBnZXRjd2gocG9wdXApIHsNCiAgICBkb2N1bWVudC5ib2R5LmdldEVsZW1lbnRzQnlUYWdOYW1lKCdzdmcnKVswXS5hcHBlbmRDaGlsZChwb3B1cCk7DQogICAgdmFyIHcgPSBwb3B1cC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS53aWR0aDsNCiAgICB2YXIgaCA9IHBvcHVwLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLmhlaWdodDsNCiAgICByZXR1cm4gW3csIGhdDQp9DQpzdmdFbGVtcyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoInN2ZyIpOw0KZm9yIChsZXQgaW5kZXggPSAxOyBpbmRleCA8PSBzdmdFbGVtcy5sZW5ndGg7IGluZGV4KyspIHsNCiAgICAvLyB2YXIgY29tbWVudHMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCdzdmc6bnRoLWNoaWxkKCcgKyBpbmRleCArICcpIGc+Z1tlZFxcOmNvbW1lbnRdJyk7DQogICAgdmFyIGNvbW1lbnRzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbChgc3ZnOm50aC1jaGlsZCgke2luZGV4fSkgZz5nW2VkXFw6Y29tbWVudF1gKTsNCiAgICBmb3IgKHZhciBpID0gMDsgaSA8IGNvbW1lbnRzLmxlbmd0aDsgaSsrKSB7DQogICAgICAgIHZhciBwb3B1cCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnROUygnaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnLCAnZycpOw0KICAgICAgICB2YXIgcG9wdXBSID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudE5TKCdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycsICdyZWN0Jyk7DQogICAgICAgIHZhciBob3ZlciA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnROUygnaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnLCAncmVjdCcpOw0KICAgICAgICB2YXIgb2xpbmUgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50TlMoJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJywgJ3JlY3QnKTsNCiAgICAgICAgaG92ZXIuc2V0QXR0cmlidXRlKCdmaWxsJywgJyNjZGNkZmYnKTsNCiAgICAgICAgaG92ZXIuc2V0QXR0cmlidXRlKCd4JywgJzAnKTsNCiAgICAgICAgaG92ZXIuc2V0QXR0cmlidXRlKCd5JywgJzAnKTsNCiAgICAgICAgaG92ZXIuc2V0QXR0cmlidXRlKCdoZWlnaHQnLCAnMTYnKTsNCiAgICAgICAgaG92ZXIuc2V0QXR0cmlidXRlKCd3aWR0aCcsICcxNicpOw0KICAgICAgICBob3Zlci5zZXRBdHRyaWJ1dGUoJ2ZpbGwtb3BhY2l0eScsICcwLjYnKTsNCiAgICAgICAgaG92ZXIuc2V0QXR0cmlidXRlKCd0cmFuc2Zvcm0nLCBjb21tZW50c1tpXS5xdWVyeVNlbGVjdG9yKCd1c2UnKS5nZXRBdHRyaWJ1dGUoJ3RyYW5zZm9ybScpKTsNCiAgICAgICAgaG92ZXIuc3R5bGUuZGlzcGxheSA9ICdub25lJzsNCiAgICAgICAgY29tbWVudHNbaV0uYXBwZW5kQ2hpbGQoaG92ZXIpOw0KICAgICAgICB2YXIgYSA9IEpTT04ucGFyc2UoY29tbWVudHNbaV0uZ2V0QXR0cmlidXRlKCdlZDpjb21tZW50JykpOw0KICAgICAgICB2YXIgaGVpZ2h0ID0gMDsNCiAgICAgICAgdmFyIGNhcnIgPSBbXTsNCiAgICAgICAgZm9yICh2YXIgaiA9IDA7IGogPCBhLmxlbmd0aDsgaisrKSB7DQogICAgICAgICAgICB2YXIgc3RhbXAgPSBOdW1iZXIoYVtqXS5EYXRlKSAqIDEwMDA7DQogICAgICAgICAgICB2YXIgdGltZSA9IHBhcnNlRGF0ZShzdGFtcCk7DQogICAgICAgICAgICB2YXIgbmFtZSA9IGFbal0uTmFtZTsNCiAgICAgICAgICAgIHZhciBtZXNzYWdlID0gYVtqXS5NZXNzYWdlOw0KICAgICAgICAgICAgdmFyIG1lc3NhZ2VBcnIgPSBtZXNzYWdlLnNwbGl0KC9cbi8pOw0KICAgICAgICAgICAgdmFyIG8gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50TlMoJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJywgJ2cnKTsNCiAgICAgICAgICAgIHZhciBuID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudE5TKCdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycsICd0ZXh0Jyk7DQogICAgICAgICAgICB2YXIgdCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnROUygnaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnLCAndGV4dCcpOw0KICAgICAgICAgICAgdmFyIG0gPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50TlMoJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJywgJ3RleHQnKTsNCiAgICAgICAgICAgIG4uc2V0QXR0cmlidXRlKCd4JywgNSk7DQogICAgICAgICAgICBuLnNldEF0dHJpYnV0ZSgneScsIDEyKTsNCiAgICAgICAgICAgIG4uc2V0QXR0cmlidXRlKCdmaWxsJywgJyMwMDZlZmYnKTsNCiAgICAgICAgICAgIG4udGV4dENvbnRlbnQgPSBuYW1lICsgJzogJzsNCiAgICAgICAgICAgIG4uc2V0QXR0cmlidXRlKCdmb250LXNpemUnLCAnMTInKTsNCiAgICAgICAgICAgIHQuc2V0QXR0cmlidXRlKCd4JywgMjAwKTsNCiAgICAgICAgICAgIHQuc2V0QXR0cmlidXRlKCd5JywgMTIpOw0KICAgICAgICAgICAgdC5zZXRBdHRyaWJ1dGUoJ2ZpbGwnLCAnIzk2OTY5NicpOw0KICAgICAgICAgICAgdC50ZXh0Q29udGVudCA9IHRpbWU7DQogICAgICAgICAgICB0LnNldEF0dHJpYnV0ZSgnZm9udC1zaXplJywgJzEwJyk7DQogICAgICAgICAgICBtLnNldEF0dHJpYnV0ZSgndHJhbnNmb3JtJywgJ3RyYW5zbGF0ZSgyMCwyNyknKTsNCiAgICAgICAgICAgIG0uc2V0QXR0cmlidXRlKCdmb250LXNpemUnLCAnMTInKTsNCiAgICAgICAgICAgIGZvciAodmFyIGsgPSAwOyBrIDwgbWVzc2FnZUFyci5sZW5ndGg7IGsrKykgew0KICAgICAgICAgICAgICAgIHZhciB0cyA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnROUygnaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnLCAndHNwYW4nKTsNCiAgICAgICAgICAgICAgICB0cy5zZXRBdHRyaWJ1dGUoJ3gnLCAnMCcpOw0KICAgICAgICAgICAgICAgIHRzLnNldEF0dHJpYnV0ZSgneScsIGsgKiAxNik7DQogICAgICAgICAgICAgICAgdHMudGV4dENvbnRlbnQgPSBtZXNzYWdlQXJyW2tdOw0KICAgICAgICAgICAgICAgIG0uYXBwZW5kQ2hpbGQodHMpOw0KICAgICAgICAgICAgfQ0KICAgICAgICAgICAgby5zZXRBdHRyaWJ1dGUoJ3RyYW5zZm9ybScsICd0cmFuc2xhdGUoMCwnICsgaGVpZ2h0ICsgJyknKTsNCiAgICAgICAgICAgIG8uYXBwZW5kQ2hpbGQobik7DQogICAgICAgICAgICBvLmFwcGVuZENoaWxkKHQpOw0KICAgICAgICAgICAgby5hcHBlbmRDaGlsZChtKTsNCiAgICAgICAgICAgIGNhcnIucHVzaChvKTsNCiAgICAgICAgICAgIHBvcHVwLmFwcGVuZENoaWxkKG8pOw0KICAgICAgICAgICAgaGVpZ2h0ID0gKG1lc3NhZ2VBcnIubGVuZ3RoICsgMSkgKiAxNiArIGhlaWdodDsNCiAgICAgICAgfQ0KICAgICAgICB2YXIgd2FyciA9IGdldGN3aChwb3B1cCk7DQogICAgICAgIG9saW5lLnNldEF0dHJpYnV0ZSgneCcsICcwJyk7DQogICAgICAgIG9saW5lLnNldEF0dHJpYnV0ZSgneScsICcwJyk7DQogICAgICAgIHZhciBvdyA9IHdhcnJbMF0gKyAxMC41Ow0KICAgICAgICB2YXIgb2ggPSB3YXJyWzFdICsgMzsNCiAgICAgICAgb2xpbmUuc2V0QXR0cmlidXRlKCd3aWR0aCcsIG93KTsNCiAgICAgICAgb2xpbmUuc2V0QXR0cmlidXRlKCdoZWlnaHQnLCBvaCk7DQogICAgICAgIG9saW5lLnNldEF0dHJpYnV0ZSgnZmlsbCcsICd3aGl0ZScpOw0KICAgICAgICBvbGluZS5zZXRBdHRyaWJ1dGUoJ3N0cm9rZScsICcjNjU2NTY1Jyk7DQogICAgICAgIHBvcHVwLmFwcGVuZENoaWxkKG9saW5lKTsNCiAgICAgICAgdmFyIGwgPSBjYXJyLmxlbmd0aDsNCiAgICAgICAgd2hpbGUgKGwtLSkgew0KICAgICAgICAgICAgcG9wdXAuYXBwZW5kQ2hpbGQoY2FycltsXSk7DQogICAgICAgIH0NCiAgICAgICAgcG9wdXAub25tb3VzZW92ZXIgPSBmdW5jdGlvbiAoKSB7DQogICAgICAgICAgICB0aGlzLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOw0KICAgICAgICB9Ow0KICAgICAgICBwb3B1cC5vbm1vdXNlb3V0ID0gZnVuY3Rpb24gKCkgew0KICAgICAgICAgICAgdGhpcy5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnOw0KICAgICAgICB9Ow0KICAgICAgICB2YXIgY3MgPSBjb21tZW50c1tpXS5xdWVyeVNlbGVjdG9yKCd1c2UnKS5nZXRBdHRyaWJ1dGUoJ3RyYW5zZm9ybScpLm1hdGNoKC9cKChcUyp8XFMqXHNcUyopXCkvKVsxXS5zcGxpdCgvIHwsLyk7DQogICAgICAgIHZhciBwcyA9IGNvbW1lbnRzW2ldLnBhcmVudE5vZGUuZ2V0QXR0cmlidXRlKCd0cmFuc2Zvcm0nKTsNCiAgICAgICAgaWYgKHBzLnN1YnN0cigwLCAyKSA9PSAndHInKSB7DQogICAgICAgICAgICB2YXIgcHBzID0gcHMubWF0Y2goL1woKFxTKnxcUypcc1xTKilcKS8pWzFdLnNwbGl0KC8gfCwvKTsNCiAgICAgICAgICAgIHZhciB4ID0gcGFyc2VGbG9hdChjc1swXSkgKyBwYXJzZUZsb2F0KHBwc1swXSk7DQogICAgICAgICAgICB2YXIgeSA9IHBhcnNlRmxvYXQocHBzWzFdKTsNCiAgICAgICAgICAgIHggPSB4LnRvc3VpdHN2ZygpOw0KICAgICAgICAgICAgeSA9IHkudG9zdWl0c3ZnKCk7DQogICAgICAgICAgICB2YXIgdHJzdHIgPSAndHJhbnNsYXRlKCcgKyB4ICsgJywnICsgeSArICcpJzsNCiAgICAgICAgfQ0KICAgICAgICBlbHNlIGlmIChwcy5zdWJzdHIoMCwgMikgPT0gJ21hJykgew0KICAgICAgICAgICAgdmFyIHBwcyA9IHBzLm1hdGNoKC8oXC0/XGQrKFwuXGQrKT8pW1wsIF0oXC0/XGQrKFwuXGQrKT8pW1wsIF0oXC0/XGQrKFwuXGQrKT8pW1wsIF0oXC0/XGQrKFwuXGQrKT8pW1wsIF0oXC0/XGQrKFwuXGQrKT8pW1wsIF0oXC0/XGQrKFwuXGQrKT8pXCkkLyk7DQogICAgICAgICAgICB2YXIgbWFBcnIgPSBbcGFyc2VGbG9hdChwcHNbMV0pLCBwYXJzZUZsb2F0KHBwc1szXSksIHBhcnNlRmxvYXQocHBzWzVdKSwgcGFyc2VGbG9hdChwcHNbN10pLCBwYXJzZUZsb2F0KHBwc1s5XSksIHBhcnNlRmxvYXQocHBzWzExXSldOw0KICAgICAgICAgICAgaWYgKG1hQXJyWzFdID09IDApIHsNCiAgICAgICAgICAgICAgICB2YXIgeCA9IHBhcnNlRmxvYXQoY3NbMF0pOw0KICAgICAgICAgICAgICAgIHZhciB5ID0gcGFyc2VGbG9hdChjc1sxXSkgKyAxNjsNCiAgICAgICAgICAgICAgICB2YXIgeDEgPSB4ICogbWFBcnJbMF0gKyB5ICogbWFBcnJbMl0gKyBtYUFycls0XTsNCiAgICAgICAgICAgICAgICB2YXIgeTEgPSB4ICogbWFBcnJbMV0gKyB5ICogbWFBcnJbM10gKyBtYUFycls1XTsNCiAgICAgICAgICAgICAgICB4MSA9IHgxLnRvc3VpdHN2ZygpOw0KICAgICAgICAgICAgICAgIHkxID0geTEudG9zdWl0c3ZnKCk7DQogICAgICAgICAgICAgICAgdmFyIHRyc3RyID0gJ3RyYW5zbGF0ZSgnICsgeDEgKyAnLCcgKyB5MSArICcpJzsNCiAgICAgICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgICAgICAgdmFyIHggPSBwYXJzZUZsb2F0KGNzWzBdKSArIDE2Ow0KICAgICAgICAgICAgICAgIHZhciB5ID0gcGFyc2VGbG9hdChjc1sxXSkgKyAxNjsNCiAgICAgICAgICAgICAgICB2YXIgeDEgPSB4ICogbWFBcnJbMF0gKyB5ICogbWFBcnJbMl0gKyBtYUFycls0XTsNCiAgICAgICAgICAgICAgICB2YXIgeTEgPSB4ICogbWFBcnJbMV0gKyB5ICogbWFBcnJbM10gKyBtYUFycls1XTsNCiAgICAgICAgICAgICAgICB4ID0gcGFyc2VGbG9hdChjc1swXSkgKyAxNjsNCiAgICAgICAgICAgICAgICB5ID0gcGFyc2VGbG9hdChjc1sxXSk7DQogICAgICAgICAgICAgICAgdmFyIHgyID0geCAqIG1hQXJyWzBdICsgeSAqIG1hQXJyWzJdICsgbWFBcnJbNF07DQogICAgICAgICAgICAgICAgdmFyIHkyID0geCAqIG1hQXJyWzFdICsgeSAqIG1hQXJyWzNdICsgbWFBcnJbNV07DQogICAgICAgICAgICAgICAgdmFyIGZ4ID0geDEgPCB4MiA/IHgxLnRvc3VpdHN2ZygpIDogeDIudG9zdWl0c3ZnKCk7DQogICAgICAgICAgICAgICAgdmFyIGZ5ID0geTEgPiB5MiA/IHkxLnRvc3VpdHN2ZygpIDogeTIudG9zdWl0c3ZnKCk7DQogICAgICAgICAgICAgICAgdmFyIG9mZnkgPSBNYXRoLmFicyh5MSAtIHkyKTsNCiAgICAgICAgICAgICAgICB2YXIgdHJzdHIgPSAndHJhbnNsYXRlKCcgKyBmeCArICcsJyArIGZ5ICsgJyknOw0KICAgICAgICAgICAgICAgIHBvcHVwUi5zZXRBdHRyaWJ1dGUoJ2hlaWdodCcsIG9mZnkudG9TdHJpbmcoKSk7DQogICAgICAgICAgICAgICAgcG9wdXBSLnNldEF0dHJpYnV0ZSgnd2lkdGgnLCAnMTYnKTsNCiAgICAgICAgICAgICAgICBwb3B1cFIuc2V0QXR0cmlidXRlKCd5JywgKC1vZmZ5KS50b1N0cmluZygpKTsNCiAgICAgICAgICAgICAgICBwb3B1cFIuc2V0QXR0cmlidXRlKCdmaWxsJywgJ3RyYW5zcGFyZW50Jyk7DQogICAgICAgICAgICAgICAgcG9wdXAuYXBwZW5kQ2hpbGQocG9wdXBSKTsNCiAgICAgICAgICAgIH0NCiAgICAgICAgfQ0KICAgICAgICBwb3B1cC5zZXRBdHRyaWJ1dGUoJ3RyYW5zZm9ybScsIHRyc3RyKTsNCiAgICAgICAgcG9wdXAuc2V0QXR0cmlidXRlKCdjb21tZW50JywgJycpOw0KICAgICAgICBwb3B1cC5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnOw0KICAgICAgICBsZXQgY29tbWVudGlkID0gY29tbWVudHNbaV0ucGFyZW50Tm9kZS5wYXJlbnROb2RlLmlkICsgIiwiICsgY29tbWVudHNbaV0ucGFyZW50Tm9kZS5pZDsNCiAgICAgICAgcG9wdXAuc2V0QXR0cmlidXRlKCdlZDpjb21tZW50aWQnLCBjb21tZW50aWQpOw0KICAgICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjc3ZnLWNvbnRhaW5lciA+IHN2ZzpudGgtY2hpbGQoJyArIGluZGV4ICsgJyknKS5hcHBlbmRDaGlsZChwb3B1cCk7DQogICAgICAgIGNvbW1lbnRzW2ldLm9ubW91c2VvdmVyID0gZnVuY3Rpb24gKCkgew0KICAgICAgICAgICAgLy8gdmFyIGNvbW1lbnRpZCA9IHRoaXMucGFyZW50Tm9kZS5pZDsNCiAgICAgICAgICAgIHRoaXMucXVlcnlTZWxlY3RvcigncmVjdCcpLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOw0KICAgICAgICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiZ1tlZFxcOmNvbW1lbnRpZD0nIiArIGNvbW1lbnRpZCArICInXVtjb21tZW50XSIpLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOw0KICAgICAgICB9Ow0KICAgICAgICBjb21tZW50c1tpXS5vbm1vdXNlb3V0ID0gZnVuY3Rpb24gKCkgew0KICAgICAgICAgICAgLy8gdmFyIGNvbW1lbnRpZCA9IHRoaXMucGFyZW50Tm9kZS5pZDsNCiAgICAgICAgICAgIC8vICAgICAgICB3aW5kb3cuZ2V0U2VsZWN0aW9uKCkucmVtb3ZlQWxsUmFuZ2VzKCk7DQogICAgICAgICAgICB0aGlzLnF1ZXJ5U2VsZWN0b3IoJ3JlY3QnKS5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnOw0KICAgICAgICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiZ1tlZFxcOmNvbW1lbnRpZD0nIiArIGNvbW1lbnRpZCArICInXVtjb21tZW50XSIpLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7DQogICAgICAgIH0NCiAgICB9DQp9DQovLy0tY29tbWVudA0KLy9ub3RlLS0NCmlmICghdWEpIHsNCiAgICBmdW5jdGlvbiBnZXR3aChzLCBwKSB7DQogICAgICAgIHZhciBtYWlucCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ2RpdicpOw0KICAgICAgICBtYWlucC5zdHlsZS5jc3NUZXh0ID0gczsNCiAgICAgICAgbWFpbnAuc3R5bGUuZGlzcGxheSA9ICdpbmxpbmUtYmxvY2snOw0KICAgICAgICBtYWlucC5zdHlsZS5tYXhXaWR0aCA9ICc0MDBweCc7DQogICAgICAgIG1haW5wLnN0eWxlLndvcmRCcmVhayA9ICdicmVhay1hbGwnOw0KICAgICAgICBtYWlucC5pbm5lckhUTUwgPSBwOw0KICAgICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKG1haW5wKTsNCiAgICAgICAgdmFyIHcgPSBtYWlucC5jbGllbnRXaWR0aDsNCiAgICAgICAgdmFyIGggPSBtYWlucC5jbGllbnRIZWlnaHQ7DQogICAgICAgIGRvY3VtZW50LmJvZHkucmVtb3ZlQ2hpbGQobWFpbnApOw0KICAgICAgICByZXR1cm4gW3csIGhdDQogICAgfQ0KICAgIHN2Z0VsZW1zID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgic3ZnIik7DQogICAgZm9yIChsZXQgaW5kZXggPSAxOyBpbmRleCA8PSBzdmdFbGVtcy5sZW5ndGg7IGluZGV4KyspIHsNCiAgICAgICAgdmFyIG5vdGVzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnc3ZnOm50aC1jaGlsZCgnICsgaW5kZXggKyAnKSBnPmdbZWRcXDpub3RlXScpOw0KICAgICAgICBmb3IgKHZhciBpID0gMDsgaSA8IG5vdGVzLmxlbmd0aDsgaSsrKSB7DQogICAgICAgICAgICB2YXIgYSA9IG5vdGVzW2ldLmdldEF0dHJpYnV0ZSgnZWQ6bm90ZScpOw0KICAgICAgICAgICAgdmFyIG5vdGVMb2NrID0gbm90ZXNbaV0uZ2V0QXR0cmlidXRlKCdlZDpub3RlbG9jaycpOw0KICAgICAgICAgICAgaWYgKG5vdGVMb2NrID09ICd0cnVlJykgew0KICAgICAgICAgICAgICAgIGNvbnRpbnVlOw0KICAgICAgICAgICAgfQ0KICAgICAgICAgICAgdmFyIG1haW5wID0gYS5tYXRjaCgvPGJvZHlbXj5dKj4oLiopPFwvYm9keT4vKVsxXTsNCiAgICAgICAgICAgIHZhciBtYWlucyA9IGEubWF0Y2goL3N0eWxlPSIoLio/KSIvKVsxXTsNCiAgICAgICAgICAgIHZhciBvdXQgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50TlMoJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJywgJ2cnKTsNCiAgICAgICAgICAgIHZhciBvbGluZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnROUygnaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnLCAncmVjdCcpOw0KICAgICAgICAgICAgdmFyIHBvcHVwID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudE5TKCdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycsICdmb3JlaWduT2JqZWN0Jyk7DQogICAgICAgICAgICB2YXIgcG9wdXBSID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudE5TKCdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycsICdyZWN0Jyk7DQogICAgICAgICAgICB2YXIgaG92ZXIgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50TlMoJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJywgJ3JlY3QnKTsNCiAgICAgICAgICAgIGhvdmVyLnNldEF0dHJpYnV0ZSgnZmlsbCcsICcjY2RjZGZmJyk7DQogICAgICAgICAgICBob3Zlci5zZXRBdHRyaWJ1dGUoJ3gnLCAnMCcpOw0KICAgICAgICAgICAgaG92ZXIuc2V0QXR0cmlidXRlKCd5JywgJzAnKTsNCiAgICAgICAgICAgIGhvdmVyLnNldEF0dHJpYnV0ZSgnaGVpZ2h0JywgJzE2Jyk7DQogICAgICAgICAgICBob3Zlci5zZXRBdHRyaWJ1dGUoJ3dpZHRoJywgJzE2Jyk7DQogICAgICAgICAgICBob3Zlci5zZXRBdHRyaWJ1dGUoJ2ZpbGwtb3BhY2l0eScsICcwLjYnKTsNCiAgICAgICAgICAgIGhvdmVyLnNldEF0dHJpYnV0ZSgndHJhbnNmb3JtJywgbm90ZXNbaV0ucXVlcnlTZWxlY3RvcigndXNlJykuZ2V0QXR0cmlidXRlKCd0cmFuc2Zvcm0nKSk7DQogICAgICAgICAgICBob3Zlci5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnOw0KICAgICAgICAgICAgbm90ZXNbaV0uYXBwZW5kQ2hpbGQoaG92ZXIpOw0KICAgICAgICAgICAgcG9wdXAuc3R5bGUuY3NzVGV4dCA9IG1haW5zOw0KICAgICAgICAgICAgcG9wdXAuaW5uZXJIVE1MID0gbWFpbnA7DQogICAgICAgICAgICB2YXIgd2ggPSBnZXR3aChtYWlucywgbWFpbnApOw0KICAgICAgICAgICAgcG9wdXAuc2V0QXR0cmlidXRlKCd3aWR0aCcsIHdoWzBdKTsNCiAgICAgICAgICAgIHBvcHVwLnNldEF0dHJpYnV0ZSgnaGVpZ2h0Jywgd2hbMV0pOw0KICAgICAgICAgICAgcG9wdXAuc2V0QXR0cmlidXRlKCd0cmFuc2Zvcm0nLCAndHJhbnNsYXRlKDgsNCknKTsNCiAgICAgICAgICAgIHBvcHVwLnN0eWxlLndvcmRCcmVhayA9ICdicmVhay1hbGwnOw0KICAgICAgICAgICAgcG9wdXAuc3R5bGUudGV4dEFsaWduID0gJ2xlZnQnOw0KICAgICAgICAgICAgb2xpbmUuc2V0QXR0cmlidXRlKCd4JywgJzAnKTsNCiAgICAgICAgICAgIG9saW5lLnNldEF0dHJpYnV0ZSgneScsICcwJyk7DQogICAgICAgICAgICBvbGluZS5zZXRBdHRyaWJ1dGUoJ3dpZHRoJywgd2hbMF0gKyAxNik7DQogICAgICAgICAgICBvbGluZS5zZXRBdHRyaWJ1dGUoJ2hlaWdodCcsIHdoWzFdICsgOCk7DQogICAgICAgICAgICBvbGluZS5zZXRBdHRyaWJ1dGUoJ3N0cm9rZScsICcjYTI3YTAwJyk7DQogICAgICAgICAgICBvbGluZS5zZXRBdHRyaWJ1dGUoJ2ZpbGwnLCAnI2ZmZTc5ZCcpOw0KICAgICAgICAgICAgb3V0LmFwcGVuZENoaWxkKG9saW5lKTsNCiAgICAgICAgICAgIG91dC5hcHBlbmRDaGlsZChwb3B1cCk7DQogICAgICAgICAgICBvdXQuc2V0QXR0cmlidXRlKCdub3RlJywgJycpOw0KICAgICAgICAgICAgb3V0LnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7DQogICAgICAgICAgICBsZXQgbm90ZWlkID0gbm90ZXNbaV0ucGFyZW50Tm9kZS5wYXJlbnROb2RlLmlkICsgIiwiICsgbm90ZXNbaV0ucGFyZW50Tm9kZS5pZDsNCiAgICAgICAgICAgIG91dC5zZXRBdHRyaWJ1dGUoJ2VkOm5vdGVpZCcsIG5vdGVpZCk7DQogICAgICAgICAgICBvdXQub25tb3VzZW92ZXIgPSBmdW5jdGlvbiAoKSB7DQogICAgICAgICAgICAgICAgdGhpcy5zdHlsZS5kaXNwbGF5ID0gJ2Jsb2NrJzsNCiAgICAgICAgICAgIH07DQogICAgICAgICAgICBvdXQub25tb3VzZW91dCA9IGZ1bmN0aW9uICgpIHsNCiAgICAgICAgICAgICAgICAvLyAgICAgICAgd2luZG93LmdldFNlbGVjdGlvbiA/IHdpbmRvdy5nZXRTZWxlY3Rpb24oKS5yZW1vdmVSYW5nZSh3aW5kb3cuZ2V0U2VsZWN0aW9uKCkucmUpOmRvY3VtZW50LnNlbGVjdGlvbi5lbXB0eSgpOw0KDQogICAgICAgICAgICAgICAgdGhpcy5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnOw0KICAgICAgICAgICAgfTsNCiAgICAgICAgICAgIHZhciBjcyA9IG5vdGVzW2ldLnF1ZXJ5U2VsZWN0b3IoJ3VzZScpLmdldEF0dHJpYnV0ZSgndHJhbnNmb3JtJykubWF0Y2goL1woKFxTKnxcUypcc1xTKilcKS8pWzFdLnNwbGl0KC8gfCwvKTsNCiAgICAgICAgICAgIHZhciBwcyA9IG5vdGVzW2ldLnBhcmVudE5vZGUuZ2V0QXR0cmlidXRlKCd0cmFuc2Zvcm0nKTsNCiAgICAgICAgICAgIGlmIChwcy5zdWJzdHIoMCwgMikgPT0gJ3RyJykgew0KICAgICAgICAgICAgICAgIHZhciBwcHMgPSBwcy5tYXRjaCgvXCgoXFMqfFxTKlxzXFMqKVwpLylbMV0uc3BsaXQoLyB8LC8pOw0KICAgICAgICAgICAgICAgIHZhciB4ID0gcGFyc2VGbG9hdChjc1swXSkgKyBwYXJzZUZsb2F0KHBwc1swXSk7DQogICAgICAgICAgICAgICAgdmFyIHkgPSBwYXJzZUZsb2F0KHBwc1sxXSk7DQogICAgICAgICAgICAgICAgeCA9IHgudG9zdWl0c3ZnKCk7DQogICAgICAgICAgICAgICAgeSA9IHkudG9zdWl0c3ZnKCk7DQogICAgICAgICAgICAgICAgdmFyIHRyc3RyID0gJ3RyYW5zbGF0ZSgnICsgeCArICcsJyArIHkgKyAnKSc7DQogICAgICAgICAgICB9IGVsc2UgaWYgKHBzLnN1YnN0cigwLCAyKSA9PSAnbWEnKSB7DQogICAgICAgICAgICAgICAgdmFyIHBwcyA9IHBzLm1hdGNoKC8oXC0/XGQrKFwuXGQrKT8pW1wsIF0oXC0/XGQrKFwuXGQrKT8pW1wsIF0oXC0/XGQrKFwuXGQrKT8pW1wsIF0oXC0/XGQrKFwuXGQrKT8pW1wsIF0oXC0/XGQrKFwuXGQrKT8pW1wsIF0oXC0/XGQrKFwuXGQrKT8pXCkkLyk7DQogICAgICAgICAgICAgICAgdmFyIG1hQXJyID0gW3BhcnNlRmxvYXQocHBzWzFdKSwgcGFyc2VGbG9hdChwcHNbM10pLCBwYXJzZUZsb2F0KHBwc1s1XSksIHBhcnNlRmxvYXQocHBzWzddKSwgcGFyc2VGbG9hdChwcHNbOV0pLCBwYXJzZUZsb2F0KHBwc1sxMV0pXTsNCiAgICAgICAgICAgICAgICBpZiAobWFBcnJbMV0gPT0gMCkgew0KICAgICAgICAgICAgICAgICAgICB2YXIgeCA9IHBhcnNlRmxvYXQoY3NbMF0pOw0KICAgICAgICAgICAgICAgICAgICB2YXIgeSA9IHBhcnNlRmxvYXQoY3NbMV0pICsgMTY7DQogICAgICAgICAgICAgICAgICAgIHZhciB4MSA9IHggKiBtYUFyclswXSArIHkgKiBtYUFyclsyXSArIG1hQXJyWzRdOw0KICAgICAgICAgICAgICAgICAgICB2YXIgeTEgPSB4ICogbWFBcnJbMV0gKyB5ICogbWFBcnJbM10gKyBtYUFycls1XTsNCiAgICAgICAgICAgICAgICAgICAgeDEgPSB4MS50b3N1aXRzdmcoKTsNCiAgICAgICAgICAgICAgICAgICAgeTEgPSB5MS50b3N1aXRzdmcoKTsNCiAgICAgICAgICAgICAgICAgICAgdmFyIHRyc3RyID0gJ3RyYW5zbGF0ZSgnICsgeDEgKyAnLCcgKyB5MSArICcpJzsNCiAgICAgICAgICAgICAgICB9IGVsc2Ugew0KICAgICAgICAgICAgICAgICAgICB2YXIgeCA9IHBhcnNlRmxvYXQoY3NbMF0pICsgMTY7DQogICAgICAgICAgICAgICAgICAgIHZhciB5ID0gcGFyc2VGbG9hdChjc1sxXSkgKyAxNjsNCiAgICAgICAgICAgICAgICAgICAgdmFyIHgxID0geCAqIG1hQXJyWzBdICsgeSAqIG1hQXJyWzJdICsgbWFBcnJbNF07DQogICAgICAgICAgICAgICAgICAgIHZhciB5MSA9IHggKiBtYUFyclsxXSArIHkgKiBtYUFyclszXSArIG1hQXJyWzVdOw0KICAgICAgICAgICAgICAgICAgICB4ID0gcGFyc2VGbG9hdChjc1swXSkgKyAxNjsNCiAgICAgICAgICAgICAgICAgICAgeSA9IHBhcnNlRmxvYXQoY3NbMV0pOw0KICAgICAgICAgICAgICAgICAgICB2YXIgeDIgPSB4ICogbWFBcnJbMF0gKyB5ICogbWFBcnJbMl0gKyBtYUFycls0XTsNCiAgICAgICAgICAgICAgICAgICAgdmFyIHkyID0geCAqIG1hQXJyWzFdICsgeSAqIG1hQXJyWzNdICsgbWFBcnJbNV07DQogICAgICAgICAgICAgICAgICAgIHZhciBmeCA9IHgxIDwgeDIgPyB4MS50b3N1aXRzdmcoKSA6IHgyLnRvc3VpdHN2ZygpOw0KICAgICAgICAgICAgICAgICAgICB2YXIgZnkgPSB5MSA+IHkyID8geTEudG9zdWl0c3ZnKCkgOiB5Mi50b3N1aXRzdmcoKTsNCiAgICAgICAgICAgICAgICAgICAgdmFyIG9mZnkgPSBNYXRoLmFicyh5MSAtIHkyKTsNCiAgICAgICAgICAgICAgICAgICAgdmFyIHRyc3RyID0gJ3RyYW5zbGF0ZSgnICsgZnggKyAnLCcgKyBmeSArICcpJzsNCiAgICAgICAgICAgICAgICAgICAgcG9wdXBSLnNldEF0dHJpYnV0ZSgnaGVpZ2h0Jywgb2ZmeS50b1N0cmluZygpKTsNCiAgICAgICAgICAgICAgICAgICAgcG9wdXBSLnNldEF0dHJpYnV0ZSgnd2lkdGgnLCAnMTYnKTsNCiAgICAgICAgICAgICAgICAgICAgcG9wdXBSLnNldEF0dHJpYnV0ZSgneScsICgtb2ZmeSkudG9TdHJpbmcoKSk7DQogICAgICAgICAgICAgICAgICAgIHBvcHVwUi5zZXRBdHRyaWJ1dGUoJ2ZpbGwnLCAndHJhbnNwYXJlbnQnKTsNCiAgICAgICAgICAgICAgICAgICAgcG9wdXAuYXBwZW5kQ2hpbGQocG9wdXBSKTsNCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQogICAgICAgICAgICBvdXQuc2V0QXR0cmlidXRlKCd0cmFuc2Zvcm0nLCB0cnN0cik7DQogICAgICAgICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjc3ZnLWNvbnRhaW5lciA+IHN2ZzpudGgtY2hpbGQoJyArIGluZGV4ICsgJyknKS5hcHBlbmRDaGlsZChvdXQpOw0KICAgICAgICAgICAgbm90ZXNbaV0ub25tb3VzZW92ZXIgPSBmdW5jdGlvbiAoKSB7DQogICAgICAgICAgICAgICAgLy8gdmFyIG5vdGVpZCA9IG5vdGVpZDsNCiAgICAgICAgICAgICAgICB0aGlzLnF1ZXJ5U2VsZWN0b3IoJ3JlY3QnKS5zdHlsZS5kaXNwbGF5ID0gJ2Jsb2NrJzsNCiAgICAgICAgICAgICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCJnW2VkXFw6bm90ZWlkPSciICsgbm90ZWlkICsgIiddW25vdGVdIikuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7DQogICAgICAgICAgICB9Ow0KICAgICAgICAgICAgbm90ZXNbaV0ub25tb3VzZW91dCA9IGZ1bmN0aW9uICgpIHsNCiAgICAgICAgICAgICAgICAvLyB2YXIgbm90ZWlkID0gbm90ZWlkOw0KICAgICAgICAgICAgICAgIC8vICAgICAgICB3aW5kb3cuZ2V0U2VsZWN0aW9uKCkucmVtb3ZlQWxsUmFuZ2VzKCk7DQogICAgICAgICAgICAgICAgdGhpcy5xdWVyeVNlbGVjdG9yKCdyZWN0Jykuc3R5bGUuZGlzcGxheSA9ICdub25lJzsNCiAgICAgICAgICAgICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCJnW2VkXFw6bm90ZWlkPSciICsgbm90ZWlkICsgIiddW25vdGVdIikuc3R5bGUuZGlzcGxheSA9ICdub25lJzsNCiAgICAgICAgICAgIH0NCiAgICAgICAgfQ0KICAgIH0NCn0gZWxzZSB7DQogICAgY29uc29sZS5sb2coJ+aKseatie+8jElF5rWP6KeI5Zmo5LiN5pSv5oyBbm90Zeino+aekO+8jOivt+S9v+eUqOWFtuS7luWGheaguOa1j+iniOWZqOOAguiwouiwou+8gScpDQp9DQovLy0tbm90ZQ0KLy9oeXBlcmxpbmstLQ0KZnVuY3Rpb24gZ2V0bWF4bGVuKGFyciwgYnJyKSB7DQogICAgdmFyIGwgPSAwOw0KICAgIHZhciBsbCA9IDA7DQogICAgZm9yICh2YXIgaiA9IDA7IGogPCBhcnIubGVuZ3RoOyBqKyspIHsNCiAgICAgICAgdmFyIGUgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50TlMoJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJywgJ3RleHQnKTsNCiAgICAgICAgaWYgKCFpc05hTihsaW5rYXJyW2pdKSkgew0KICAgICAgICAgICAgZS50ZXh0Q29udGVudCA9ICdQYWdlLScgKyBhcnJbal07DQogICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgICBlLnRleHRDb250ZW50ID0gYXJyW2pdOw0KICAgICAgICB9DQogICAgICAgIGUuc3R5bGUuZm9udFNpemUgPSAnMTJweCc7DQogICAgICAgIGRvY3VtZW50LmJvZHkuZ2V0RWxlbWVudHNCeVRhZ05hbWUoJ3N2ZycpWzBdLmFwcGVuZENoaWxkKGUpOw0KICAgICAgICB2YXIgZXcgPSBlLmdldEJCb3goKS53aWR0aDsNCiAgICAgICAgZG9jdW1lbnQuYm9keS5nZXRFbGVtZW50c0J5VGFnTmFtZSgnc3ZnJylbMF0ucmVtb3ZlQ2hpbGQoZSk7DQogICAgICAgIHZhciBoID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudE5TKCdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycsICd0ZXh0Jyk7DQogICAgICAgIGgudGV4dENvbnRlbnQgPSBicnJbal07DQogICAgICAgIGguc3R5bGUuZm9udFNpemUgPSAnMTJweCc7DQogICAgICAgIGguc3R5bGUuZm9udFdlaWdodCA9ICdib2xkJzsNCiAgICAgICAgZG9jdW1lbnQuYm9keS5nZXRFbGVtZW50c0J5VGFnTmFtZSgnc3ZnJylbMF0uYXBwZW5kQ2hpbGQoaCk7DQogICAgICAgIHZhciBodyA9IGguZ2V0QkJveCgpLndpZHRoOw0KICAgICAgICBkb2N1bWVudC5ib2R5LmdldEVsZW1lbnRzQnlUYWdOYW1lKCdzdmcnKVswXS5yZW1vdmVDaGlsZChoKTsNCiAgICAgICAgbCA9IGV3ID4gaHcgPyBldyA6IGh3Ow0KICAgICAgICBsbCA9IGwgPiBsbCA/IGwgOiBsbDsNCiAgICB9DQogICAgcmV0dXJuIGxsOw0KfQ0Kc3ZnRWxlbXMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCJzdmciKTsNCmZvciAobGV0IGluZGV4ID0gMTsgaW5kZXggPD0gc3ZnRWxlbXMubGVuZ3RoOyBpbmRleCsrKSB7DQogICAgbGV0IHN2Z0VsZW0gPSBzdmdFbGVtc1tpbmRleF07DQogICAgbGV0IGxpbmtzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgic3ZnOm50aC1jaGlsZCgiICsgaW5kZXggKyAiKSBnPmdbZWRcXDpoeXBlcmxpbmtdIikNCiAgICBjb25zb2xlLmxvZyhsaW5rcyk7DQogICAgLy8gdmFyIGxpbmtzPWRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoJ2c+Z1tlZFxcOmh5cGVybGlua10nKTsNCiAgICBmb3IgKHZhciBpID0gMDsgaSA8IGxpbmtzLmxlbmd0aDsgaSsrKSB7DQogICAgICAgIHZhciBwb3B1cCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnROUygnaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnLCAnZycpOw0KICAgICAgICB2YXIgcG9wdXBSID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudE5TKCdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycsICdyZWN0Jyk7DQogICAgICAgIHZhciBob3ZlciA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnROUygnaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnLCAncmVjdCcpOw0KICAgICAgICB2YXIgZGVzY2FyciA9IFtdOw0KICAgICAgICB2YXIgbGlua2FyciA9IFtdOw0KICAgICAgICBob3Zlci5zZXRBdHRyaWJ1dGUoJ2ZpbGwnLCAnI2NkY2RmZicpOw0KICAgICAgICBob3Zlci5zZXRBdHRyaWJ1dGUoJ3gnLCAnMCcpOw0KICAgICAgICBob3Zlci5zZXRBdHRyaWJ1dGUoJ3knLCAnMCcpOw0KICAgICAgICBob3Zlci5zZXRBdHRyaWJ1dGUoJ2hlaWdodCcsICcxNicpOw0KICAgICAgICBob3Zlci5zZXRBdHRyaWJ1dGUoJ3dpZHRoJywgJzE2Jyk7DQogICAgICAgIGhvdmVyLnNldEF0dHJpYnV0ZSgnZmlsbC1vcGFjaXR5JywgJzAuNicpOw0KICAgICAgICBob3Zlci5zZXRBdHRyaWJ1dGUoJ3RyYW5zZm9ybScsIGxpbmtzW2ldLnF1ZXJ5U2VsZWN0b3IoJ3VzZScpLmdldEF0dHJpYnV0ZSgndHJhbnNmb3JtJykpOw0KICAgICAgICBob3Zlci5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnOw0KICAgICAgICBsaW5rc1tpXS5hcHBlbmRDaGlsZChob3Zlcik7DQogICAgICAgIC8vIGNvbnNvbGUubG9nKGxpbmtzW2ldLmdldEF0dHJpYnV0ZSgnZWQ6aHlwZXJsaW5rJykpOw0KICAgICAgICB2YXIgYSA9IEpTT04ucGFyc2UobGlua3NbaV0uZ2V0QXR0cmlidXRlKCdlZDpoeXBlcmxpbmsnKSk7DQogICAgICAgIHZhciBjcyA9IGxpbmtzW2ldLnF1ZXJ5U2VsZWN0b3IoJ3VzZScpLmdldEF0dHJpYnV0ZSgndHJhbnNmb3JtJykubWF0Y2goL1woKFxTKnxcUypcc1xTKilcKS8pWzFdLnNwbGl0KC8gfCwvKTsNCiAgICAgICAgdmFyIHBzID0gbGlua3NbaV0ucGFyZW50Tm9kZS5nZXRBdHRyaWJ1dGUoJ3RyYW5zZm9ybScpOw0KICAgICAgICBpZiAocHMuc3Vic3RyKDAsIDIpID09ICd0cicpIHsNCiAgICAgICAgICAgIHZhciBwcHMgPSBwcy5tYXRjaCgvXCgoXFMqfFxTKlxzXFMqKVwpLylbMV0uc3BsaXQoLyB8LC8pOw0KICAgICAgICAgICAgdmFyIHggPSBwYXJzZUZsb2F0KGNzWzBdKSArIHBhcnNlRmxvYXQocHBzWzBdKTsNCiAgICAgICAgICAgIHZhciB5ID0gcGFyc2VGbG9hdChwcHNbMV0pOw0KICAgICAgICAgICAgeCA9IHgudG9zdWl0c3ZnKCk7DQogICAgICAgICAgICB5ID0geS50b3N1aXRzdmcoKTsNCiAgICAgICAgICAgIHZhciB0cnN0ciA9ICd0cmFuc2xhdGUoJyArIHggKyAnLCcgKyB5ICsgJyknOw0KICAgICAgICB9IGVsc2UgaWYgKHBzLnN1YnN0cigwLCAyKSA9PSAnbWEnKSB7DQogICAgICAgICAgICB2YXIgcHBzID0gcHMubWF0Y2goLyhcLT9cZCsoXC5cZCspPylbXCwgXShcLT9cZCsoXC5cZCspPylbXCwgXShcLT9cZCsoXC5cZCspPylbXCwgXShcLT9cZCsoXC5cZCspPylbXCwgXShcLT9cZCsoXC5cZCspPylbXCwgXShcLT9cZCsoXC5cZCspPylcKSQvKTsNCiAgICAgICAgICAgIHZhciBtYUFyciA9IFtwYXJzZUZsb2F0KHBwc1sxXSksIHBhcnNlRmxvYXQocHBzWzNdKSwgcGFyc2VGbG9hdChwcHNbNV0pLCBwYXJzZUZsb2F0KHBwc1s3XSksIHBhcnNlRmxvYXQocHBzWzldKSwgcGFyc2VGbG9hdChwcHNbMTFdKV07DQogICAgICAgICAgICBpZiAobWFBcnJbMV0gPT0gMCkgew0KICAgICAgICAgICAgICAgIHZhciB4ID0gcGFyc2VGbG9hdChjc1swXSk7DQogICAgICAgICAgICAgICAgdmFyIHkgPSBwYXJzZUZsb2F0KGNzWzFdKSArIDE2Ow0KICAgICAgICAgICAgICAgIHZhciB4MSA9IHggKiBtYUFyclswXSArIHkgKiBtYUFyclsyXSArIG1hQXJyWzRdOw0KICAgICAgICAgICAgICAgIHZhciB5MSA9IHggKiBtYUFyclsxXSArIHkgKiBtYUFyclszXSArIG1hQXJyWzVdOw0KICAgICAgICAgICAgICAgIHgxID0geDEudG9zdWl0c3ZnKCk7DQogICAgICAgICAgICAgICAgeTEgPSB5MS50b3N1aXRzdmcoKTsNCiAgICAgICAgICAgICAgICB2YXIgdHJzdHIgPSAndHJhbnNsYXRlKCcgKyB4MSArICcsJyArIHkxICsgJyknOw0KICAgICAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICAgICAgICB2YXIgeCA9IHBhcnNlRmxvYXQoY3NbMF0pICsgMTY7DQogICAgICAgICAgICAgICAgdmFyIHkgPSBwYXJzZUZsb2F0KGNzWzFdKSArIDE2Ow0KICAgICAgICAgICAgICAgIHZhciB4MSA9IHggKiBtYUFyclswXSArIHkgKiBtYUFyclsyXSArIG1hQXJyWzRdOw0KICAgICAgICAgICAgICAgIHZhciB5MSA9IHggKiBtYUFyclsxXSArIHkgKiBtYUFyclszXSArIG1hQXJyWzVdOw0KICAgICAgICAgICAgICAgIHggPSBwYXJzZUZsb2F0KGNzWzBdKSArIDE2Ow0KICAgICAgICAgICAgICAgIHkgPSBwYXJzZUZsb2F0KGNzWzFdKTsNCiAgICAgICAgICAgICAgICB2YXIgeDIgPSB4ICogbWFBcnJbMF0gKyB5ICogbWFBcnJbMl0gKyBtYUFycls0XTsNCiAgICAgICAgICAgICAgICB2YXIgeTIgPSB4ICogbWFBcnJbMV0gKyB5ICogbWFBcnJbM10gKyBtYUFycls1XTsNCiAgICAgICAgICAgICAgICB2YXIgZnggPSB4MSA8IHgyID8geDEudG9zdWl0c3ZnKCkgOiB4Mi50b3N1aXRzdmcoKTsNCiAgICAgICAgICAgICAgICB2YXIgZnkgPSB5MSA+IHkyID8geTEudG9zdWl0c3ZnKCkgOiB5Mi50b3N1aXRzdmcoKTsNCiAgICAgICAgICAgICAgICB2YXIgb2ZmeSA9IE1hdGguYWJzKHkxIC0geTIpOw0KICAgICAgICAgICAgICAgIHZhciB0cnN0ciA9ICd0cmFuc2xhdGUoJyArIGZ4ICsgJywnICsgZnkgKyAnKSc7DQogICAgICAgICAgICAgICAgcG9wdXBSLnNldEF0dHJpYnV0ZSgnaGVpZ2h0Jywgb2ZmeS50b1N0cmluZygpKTsNCiAgICAgICAgICAgICAgICBwb3B1cFIuc2V0QXR0cmlidXRlKCd3aWR0aCcsICcxNicpOw0KICAgICAgICAgICAgICAgIHBvcHVwUi5zZXRBdHRyaWJ1dGUoJ3knLCAoLW9mZnkpLnRvU3RyaW5nKCkpOw0KICAgICAgICAgICAgICAgIHBvcHVwUi5zZXRBdHRyaWJ1dGUoJ2ZpbGwnLCAndHJhbnNwYXJlbnQnKTsNCiAgICAgICAgICAgICAgICBwb3B1cC5hcHBlbmRDaGlsZChwb3B1cFIpOw0KICAgICAgICAgICAgfQ0KICAgICAgICB9DQogICAgICAgIHZhciBhbCA9IGEubGVuZ3RoOw0KICAgICAgICBmb3IgKHZhciBqID0gMDsgaiA8IGFsOyBqKyspIHsNCiAgICAgICAgICAgIGxpbmthcnIucHVzaChhW2pdLmxpbmspOw0KICAgICAgICAgICAgZGVzY2Fyci5wdXNoKGFbal0uZGVzYyk7DQogICAgICAgIH0NCiAgICAgICAgcG9wdXAuc2V0QXR0cmlidXRlKCd0cmFuc2Zvcm0nLCB0cnN0cik7DQogICAgICAgIHZhciBtYXggPSBnZXRtYXhsZW4obGlua2FyciwgZGVzY2Fycik7DQogICAgICAgIGZvciAodmFyIGsgPSAwOyBrIDwgYWw7IGsrKykgew0KICAgICAgICAgICAgdmFyIGMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50TlMoJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJywgJ2EnKTsNCiAgICAgICAgICAgIHZhciBkID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudE5TKCdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycsICdyZWN0Jyk7DQogICAgICAgICAgICB2YXIgZSA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnROUygnaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnLCAndGV4dCcpOw0KICAgICAgICAgICAgdmFyIGYgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50TlMoJ2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJywgJ3RleHQnKTsNCiAgICAgICAgICAgIGlmIChpc05hTihsaW5rYXJyW2tdKSkgew0KICAgICAgICAgICAgICAgIGMuc2V0QXR0cmlidXRlTlMoImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiwgInhsaW5rIiwgImh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiKTsNCiAgICAgICAgICAgICAgICBjLnNldEF0dHJpYnV0ZU5TKCJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiwgImhyZWYiLCBsaW5rYXJyW2tdKTsNCiAgICAgICAgICAgICAgICBjLnNldEF0dHJpYnV0ZSgndGFyZ2V0JywgJ19ibGFuaycpOw0KICAgICAgICAgICAgICAgIGUudGV4dENvbnRlbnQgPSBsaW5rYXJyW2tdOw0KICAgICAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICAgICAgICBlLnRleHRDb250ZW50ID0gJ1BhZ2UtJyArIGxpbmthcnJba107DQogICAgICAgICAgICAgICAgYy5zZXRBdHRyaWJ1dGVOUygiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciLCAieGxpbmsiLCAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIpOw0KICAgICAgICAgICAgICAgIGMuc2V0QXR0cmlidXRlTlMoImh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiLCAiaHJlZiIsICIjIiArIGxpbmthcnJba10pOw0KICAgICAgICAgICAgfQ0KICAgICAgICAgICAgZC5zZXRBdHRyaWJ1dGUoJ3dpZHRoJywgbWF4ICsgMTApOw0KICAgICAgICAgICAgZC5zZXRBdHRyaWJ1dGUoJ2hlaWdodCcsICczMycpOw0KICAgICAgICAgICAgZC5zZXRBdHRyaWJ1dGUoJ3N0cm9rZScsICcjOTk5OTk5Jyk7DQogICAgICAgICAgICBkLnNldEF0dHJpYnV0ZSgnZmlsbCcsICd3aGl0ZScpOw0KICAgICAgICAgICAgZC5zZXRBdHRyaWJ1dGUoJ3knLCAzMyAqIGspOw0KICAgICAgICAgICAgZi50ZXh0Q29udGVudCA9IGRlc2NhcnJba107DQogICAgICAgICAgICBmLnN0eWxlLmZvbnRTaXplID0gJzEycHgnOw0KICAgICAgICAgICAgZi5zdHlsZS5mb250V2VpZ2h0ID0gJ2JvbGQnOw0KICAgICAgICAgICAgZi5zZXRBdHRyaWJ1dGUoJ3gnLCA1KTsNCiAgICAgICAgICAgIGYuc2V0QXR0cmlidXRlKCd5JywgMzMgKiBrICsgMTIpOw0KICAgICAgICAgICAgZS5zdHlsZS5mb250U2l6ZSA9ICcxMnB4JzsNCiAgICAgICAgICAgIGUuc2V0QXR0cmlidXRlKCd5JywgMzMgKiBrICsgMjgpOw0KICAgICAgICAgICAgZS5zZXRBdHRyaWJ1dGUoJ3gnLCA1KTsNCiAgICAgICAgICAgIGMuYXBwZW5kQ2hpbGQoZCk7DQogICAgICAgICAgICBjLmFwcGVuZENoaWxkKGYpOw0KICAgICAgICAgICAgYy5hcHBlbmRDaGlsZChlKTsNCiAgICAgICAgICAgIGMub25tb3VzZW92ZXIgPSBmdW5jdGlvbiAoKSB7DQogICAgICAgICAgICAgICAgdGhpcy5xdWVyeVNlbGVjdG9yKCdyZWN0Jykuc3R5bGUuZmlsbCA9ICcjZTFlMWZmJw0KICAgICAgICAgICAgfTsNCiAgICAgICAgICAgIGMub25tb3VzZW91dCA9IGZ1bmN0aW9uICgpIHsNCiAgICAgICAgICAgICAgICB0aGlzLnF1ZXJ5U2VsZWN0b3IoJ3JlY3QnKS5zdHlsZS5maWxsID0gJ3doaXRlJw0KICAgICAgICAgICAgfTsNCiAgICAgICAgICAgIHBvcHVwLmFwcGVuZENoaWxkKGMpOw0KICAgICAgICB9DQogICAgICAgIHBvcHVwLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7DQogICAgICAgIHBvcHVwLnNldEF0dHJpYnV0ZSgnaHlwZXJsaW5rJywgJycpOw0KICAgICAgICBwb3B1cC5zZXRBdHRyaWJ1dGUoJ2VkOmxpbmtpZCcsIGxpbmtzW2ldLnBhcmVudE5vZGUucGFyZW50Tm9kZS5pZCArICIsIiArIGxpbmtzW2ldLnBhcmVudE5vZGUuaWQpOw0KICAgICAgICBwb3B1cC5vbm1vdXNlb3ZlciA9IGZ1bmN0aW9uICgpIHsNCiAgICAgICAgICAgIHRoaXMuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7DQogICAgICAgIH07DQogICAgICAgIHBvcHVwLm9uY2xpY2sgPSBmdW5jdGlvbiAoKSB7DQogICAgICAgICAgICB0aGlzLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7DQogICAgICAgIH07DQogICAgICAgIHBvcHVwLm9ubW91c2VvdXQgPSBmdW5jdGlvbiAoKSB7DQogICAgICAgICAgICB0aGlzLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7DQogICAgICAgIH07DQogICAgICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJyNzdmctY29udGFpbmVyID4gc3ZnOm50aC1jaGlsZCgnICsgaW5kZXggKyAnKScpLmFwcGVuZENoaWxkKHBvcHVwKTsNCiAgICAgICAgbGlua3NbaV0ub25tb3VzZW92ZXIgPSBmdW5jdGlvbiAoKSB7DQogICAgICAgICAgICB2YXIgbGlua2lkID0gdGhpcy5wYXJlbnROb2RlLnBhcmVudE5vZGUuaWQgKyAiLCIgKyB0aGlzLnBhcmVudE5vZGUuaWQ7DQogICAgICAgICAgICB0aGlzLnF1ZXJ5U2VsZWN0b3IoJ3JlY3QnKS5zdHlsZS5kaXNwbGF5ID0gJ2Jsb2NrJzsNCiAgICAgICAgICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoImdbZWRcXDpsaW5raWQ9JyIgKyBsaW5raWQgKyAiJ11baHlwZXJsaW5rXSIpLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snOw0KICAgICAgICAgICAgLy8gcG9wdXAuc3R5bGUuZGlzcGxheSA9ICdibG9jayc7DQogICAgICAgIH0NCiAgICAgICAgbGlua3NbaV0ub25tb3VzZW91dCA9IGZ1bmN0aW9uICgpIHsNCiAgICAgICAgICAgIC8vIHZhciBsaW5raWQgPSB0aGlzLnBhcmVudE5vZGUuaWQ7DQogICAgICAgICAgICB2YXIgbGlua2lkID0gdGhpcy5wYXJlbnROb2RlLnBhcmVudE5vZGUuaWQgKyAiLCIgKyB0aGlzLnBhcmVudE5vZGUuaWQ7DQogICAgICAgICAgICB0aGlzLnF1ZXJ5U2VsZWN0b3IoJ3JlY3QnKS5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnOw0KICAgICAgICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiZ1tlZFxcOmxpbmtpZD0nIiArIGxpbmtpZCArICInXVtoeXBlcmxpbmtdIikuc3R5bGUuZGlzcGxheSA9ICdub25lJzsNCiAgICAgICAgICAgIC8vIHBvcHVwLnN0eWxlLmRpc3BsYXkgPSAnbm9uZSc7DQogICAgICAgIH0NCiAgICB9DQp9DQoNCi8vLS1oeXBlcmxpbmsNCi8vaW5pdGlhbGl6ZS0tDQp2YXIgc2hhcGUgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCdnW2VkXFw6dG9ndG9waWNpZF0nKTsNCnZhciBtSWQgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCdnW2VkXFw6dG9waWN0eXBlXScpOw0KdmFyIGRhdGFUcmVlID0ge307DQp2YXIgZXh0cmFSZWxhID0ge307DQp2YXIgY2hlY2tJRCA9ICcnOw0KZm9yICh2YXIgaSA9IDA7IGkgPCBtSWQubGVuZ3RoOyBpKyspIHsNCiAgICB2YXIgdHlwZSA9IG1JZFtpXS5nZXRBdHRyaWJ1dGUoJ2VkOnRvcGljdHlwZScpOw0KICAgIHZhciBzaWQgPSBtSWRbaV0uaWQ7DQogICAgaWYgKHR5cGUgIT09ICdjYWxsb3V0Jykgew0KICAgICAgICBpbml0KHNpZCwgZGF0YVRyZWUpDQogICAgfQ0KfQ0KZnVuY3Rpb24gaW5pdChpZCwgb2JqKSB7DQogICAgdmFyIGNoaWxkcyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoImdbZWRcXDpwYXJlbnRpZD0nIiArIGlkICsgIiddOm5vdChbZWRcXDp0b3BpY3R5cGVdKSIpOw0KICAgIHZhciBjYWxscyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoImdbZWRcXDpwYXJlbnRpZD0nIiArIGlkICsgIiddW2VkXFw6dG9waWN0eXBlXSIpOw0KICAgIHZhciBzdW1tYXJ5ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgicGF0aFtlZFxcOnBhcmVudGlkKj0nIiArIGlkICsgIiddW2VkXFw6dHlwZT0nc3VtbWFyeSddIik7DQogICAgdmFyIGJvdW5kYXJ5ID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgicGF0aFtlZFxcOnBhcmVudGlkKj0nIiArIGlkICsgIiddW2VkXFw6dHlwZT0nYm91bmRhcnknXSIpOw0KICAgIHZhciByZWxhZnJvbSA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoImdbZWRcXDpmcm9taWQqPSciICsgaWQgKyAiJ11bZWRcXDp0eXBlPSdyZWxhdGlvbiddIik7DQogICAgdmFyIHJlbGF0byA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3JBbGwoImdbZWRcXDp0b2lkKj0nIiArIGlkICsgIiddW2VkXFw6dHlwZT0ncmVsYXRpb24nXSIpOw0KICAgIG9ialsibSIgKyBpZF0gPSB7fTsNCiAgICB2YXIgdHlwZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGlkKS5nZXRBdHRyaWJ1dGUoJ2VkOnRvcGljdHlwZScpOw0KICAgIHZhciBpdyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGlkKS5nZXRBdHRyaWJ1dGUoJ2VkOndpZHRoJyk7DQogICAgdmFyIGloID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoaWQpLmdldEF0dHJpYnV0ZSgnZWQ6aGVpZ2h0Jyk7DQogICAgaWYgKHR5cGUpIHsNCiAgICAgICAgb2JqWyJtIiArIGlkXS50eXBlID0gdHlwZTsNCiAgICB9DQogICAgaWYgKGl3ICYmIGloKSB7DQogICAgICAgIG9ialsibSIgKyBpZF0ud2lkdGggPSBpdzsNCiAgICAgICAgb2JqWyJtIiArIGlkXS5oZWlnaHQgPSBpaDsNCiAgICB9DQogICAgaWYgKHJlbGFmcm9tLmxlbmd0aCAhPT0gMCkgew0KICAgICAgICBvYmpbIm0iICsgaWRdLnJlbGFmcm9tID0ge307DQogICAgICAgIGZvciAodmFyIGkgPSAwOyBpIDwgcmVsYWZyb20ubGVuZ3RoOyBpKyspIHsNCiAgICAgICAgICAgIHZhciBpbmRleGlkID0gcmVsYWZyb21baV0uaWQ7DQogICAgICAgICAgICB2YXIgdG9pZCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGluZGV4aWQpLmdldEF0dHJpYnV0ZSgnZWQ6dG9pZCcpOw0KICAgICAgICAgICAgaWYgKGV4dHJhUmVsYVtpbmRleGlkXSA9PT0gdW5kZWZpbmVkKSB7DQogICAgICAgICAgICAgICAgZXh0cmFSZWxhW2luZGV4aWRdID0gew0KICAgICAgICAgICAgICAgICAgICBpZDogaW5kZXhpZCwNCiAgICAgICAgICAgICAgICAgICAgZnJvbWlkOiBpZCwNCiAgICAgICAgICAgICAgICAgICAgdG9pZDogdG9pZCwNCiAgICAgICAgICAgICAgICAgICAgaXNDOiBmYWxzZQ0KICAgICAgICAgICAgICAgIH07DQogICAgICAgICAgICB9DQogICAgICAgICAgICBvYmpbIm0iICsgaWRdLnJlbGFmcm9tW2luZGV4aWRdID0ge307DQogICAgICAgICAgICBvYmpbIm0iICsgaWRdLnJlbGFmcm9tLmRpc3BsYXkgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChpZCkuc3R5bGUuZGlzcGxheSAhPT0gJ25vbmUnID8gJ2Jsb2NrJyA6ICdub25lJzsNCiAgICAgICAgfQ0KICAgIH0NCiAgICBpZiAocmVsYXRvLmxlbmd0aCAhPT0gMCkgew0KICAgICAgICBvYmpbIm0iICsgaWRdLnJlbGF0byA9IHt9Ow0KICAgICAgICBmb3IgKHZhciBpID0gMDsgaSA8IHJlbGF0by5sZW5ndGg7IGkrKykgew0KICAgICAgICAgICAgdmFyIGluZGV4aWQgPSByZWxhdG9baV0uaWQ7DQogICAgICAgICAgICB2YXIgZnJvbWlkID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoaW5kZXhpZCkuZ2V0QXR0cmlidXRlKCdlZDpmcm9taWQnKTsNCiAgICAgICAgICAgIGlmIChleHRyYVJlbGFbaW5kZXhpZF0gPT09IHVuZGVmaW5lZCkgew0KICAgICAgICAgICAgICAgIGV4dHJhUmVsYVtpbmRleGlkXSA9IHsNCiAgICAgICAgICAgICAgICAgICAgaWQ6IGluZGV4aWQsDQogICAgICAgICAgICAgICAgICAgIGZyb21pZDogZnJvbWlkLA0KICAgICAgICAgICAgICAgICAgICB0b2lkOiBpZCwNCiAgICAgICAgICAgICAgICAgICAgaXNDOiBmYWxzZQ0KICAgICAgICAgICAgICAgIH07DQogICAgICAgICAgICB9DQogICAgICAgICAgICBvYmpbIm0iICsgaWRdLnJlbGF0b1tpbmRleGlkXSA9IHt9Ow0KICAgICAgICAgICAgb2JqWyJtIiArIGlkXS5yZWxhdG8uZGlzcGxheSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGlkKS5zdHlsZS5kaXNwbGF5ICE9PSAnbm9uZScgPyAnYmxvY2snIDogJ25vbmUnOw0KICAgICAgICB9DQogICAgfQ0KICAgIGlmIChjaGlsZHMubGVuZ3RoICE9PSAwKSB7DQogICAgICAgIG9ialsibSIgKyBpZF0uY2hpbGQgPSB7fTsNCiAgICAgICAgaWYgKGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoImdbZWRcXDp0b2d0b3BpY2lkPSciICsgaWQgKyAiJ10iKSkgew0KICAgICAgICAgICAgLy8gY29uc29sZS5sb2coZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiZ1tlZFxcOnRvZ3RvcGljaWQ9JyIgKyBpZCArICInXSIpLmNoaWxkTm9kZXNbMF0uZ2V0QXR0cmlidXRlKCd4bGluazpocmVmJykpOw0KICAgICAgICAgICAgdmFyIHRvZyA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoImdbZWRcXDp0b2d0b3BpY2lkPSciICsgaWQgKyAiJ10iKS5nZXRFbGVtZW50c0J5VGFnTmFtZSgndXNlJylbMF0uZ2V0QXR0cmlidXRlKCd4bGluazpocmVmJykuc2xpY2UoMSk7DQogICAgICAgICAgICBvYmpbIm0iICsgaWRdLnRvZ3R5cGUgPSB0b2c7DQogICAgICAgIH0NCiAgICAgICAgZm9yICh2YXIgaSA9IDA7IGkgPCBjaGlsZHMubGVuZ3RoOyBpKyspIHsNCiAgICAgICAgICAgIHZhciBjaWQgPSBjaGlsZHNbaV0uaWQ7DQogICAgICAgICAgICBpbml0KGNpZCwgb2JqWyJtIiArIGlkXS5jaGlsZCk7DQogICAgICAgIH0NCiAgICB9DQogICAgaWYgKGNhbGxzLmxlbmd0aCAhPT0gMCkgew0KICAgICAgICBvYmpbIm0iICsgaWRdLmNhbGwgPSB7fTsNCiAgICAgICAgZm9yICh2YXIgaSA9IDA7IGkgPCBjYWxscy5sZW5ndGg7IGkrKykgew0KICAgICAgICAgICAgdmFyIGNpZCA9IGNhbGxzW2ldLmlkOw0KICAgICAgICAgICAgaW5pdChjaWQsIG9ialsibSIgKyBpZF0uY2FsbCk7DQogICAgICAgIH0NCiAgICB9DQogICAgaWYgKGJvdW5kYXJ5Lmxlbmd0aCAhPT0gMCkgew0KICAgICAgICBvYmpbIm0iICsgaWRdLmJvdW5kYXJ5ID0ge307DQogICAgICAgIGZvciAodmFyIGkgPSAwOyBpIDwgYm91bmRhcnkubGVuZ3RoOyBpKyspIHsNCiAgICAgICAgICAgIHZhciBjaWQgPSBib3VuZGFyeVtpXS5pZDsNCiAgICAgICAgICAgIGluaXQoY2lkLCBvYmpbIm0iICsgaWRdLmJvdW5kYXJ5KTsNCiAgICAgICAgfQ0KICAgIH0NCiAgICBpZiAoc3VtbWFyeS5sZW5ndGggIT09IDApIHsNCiAgICAgICAgb2JqWyJtIiArIGlkXS5zdW1tYXJ5ID0ge307DQogICAgICAgIGZvciAodmFyIGkgPSAwOyBpIDwgc3VtbWFyeS5sZW5ndGg7IGkrKykgew0KICAgICAgICAgICAgdmFyIGNpZCA9IHN1bW1hcnlbaV0uaWQ7DQogICAgICAgICAgICBpbml0KGNpZCwgb2JqWyJtIiArIGlkXS5zdW1tYXJ5KTsNCiAgICAgICAgfQ0KICAgIH0NCn0NCi8vLS1pbml0aWFsaXplDQovL3RvZ2dsZWRpc3BsYXktLQ0KdmFyIGNoYWluQXJyID0gW107DQpmdW5jdGlvbiBnZXRjaGFpbihpZCkgew0KICAgIGNoYWluQXJyLnVuc2hpZnQoJ20nICsgaWQpOw0KICAgIHZhciBwYXJlbnQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChpZCkuZ2V0QXR0cmlidXRlKCdlZDpwYXJlbnRpZCcpOw0KICAgIGlmICghcGFyZW50KSB7DQogICAgICAgIHJldHVybjsNCiAgICB9DQogICAgaWYgKHBhcmVudC5tYXRjaCgvXCwvKSkgew0KICAgICAgICBwYXJlbnQgPSBwYXJlbnQubWF0Y2goL1xkKyg/PVwsKS8pWzBdDQogICAgfQ0KICAgIGdldGNoYWluKHBhcmVudCk7DQp9DQpmdW5jdGlvbiBnZXRvYmooaWQpIHsNCiAgICBjaGFpbkFyciA9IFtdOw0KICAgIGdldGNoYWluKGlkKTsNCiAgICB2YXIgbWFpbiA9IGNoYWluQXJyWzBdOw0KICAgIGlmIChjaGFpbkFyci5sZW5ndGggPiAxKSB7DQogICAgICAgIHZhciBvYmogPSBkYXRhVHJlZVttYWluXTsNCiAgICAgICAgLy8gY29uc29sZS5sb2coY2hhaW5BcnIpOw0KICAgICAgICBmb3IgKHZhciBpID0gMTsgaSA8IGNoYWluQXJyLmxlbmd0aDsgaSsrKSB7DQogICAgICAgICAgICB2YXIgYSA9IGNoYWluQXJyW2ldOw0KICAgICAgICAgICAgZm9yICh2YXIgaiA9IDA7IGogPCBPYmplY3Qua2V5cyhvYmopLmxlbmd0aDsgaisrKSB7DQogICAgICAgICAgICAgICAgdmFyIGNvYmogPSBvYmpbT2JqZWN0LmtleXMob2JqKVtqXV1bYV07DQogICAgICAgICAgICAgICAgaWYgKGNvYmopIHsNCiAgICAgICAgICAgICAgICAgICAgb2JqID0gY29iajsNCiAgICAgICAgICAgICAgICAgICAgY29udGludWUNCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQogICAgICAgIH0NCiAgICAgICAgcmV0dXJuIG9iag0KICAgIH0gZWxzZSB7DQogICAgICAgIHZhciBvYmogPSBkYXRhVHJlZVttYWluXTsNCiAgICAgICAgcmV0dXJuIG9iag0KICAgIH0NCg0KfQ0KZm9yICh2YXIgaSA9IDA7IGkgPCBzaGFwZS5sZW5ndGg7IGkrKykgew0KICAgIHNoYXBlW2ldLm9uY2xpY2sgPSBmdW5jdGlvbiAoKSB7DQogICAgICAgIHZhciBpZCA9IE51bWJlcih0aGlzLmdldEF0dHJpYnV0ZSgnZWQ6dG9ndG9waWNpZCcpKTsNCiAgICAgICAgdmFyIG9iaiA9IGdldG9iaihpZCk7DQoNCiAgICAgICAgdmFyIHR5cGUgPSBvYmoudG9ndHlwZSA9PT0gJ21pbnVzJyA/ICdwbHVzJyA6ICdtaW51cyc7DQogICAgICAgIHZhciBkaXNwbGF5ID0gb2JqLnRvZ3R5cGUgPT09ICdtaW51cycgPyAnbm9uZScgOiAnYmxvY2snOw0KICAgICAgICB0aGlzLmdldEVsZW1lbnRzQnlUYWdOYW1lKCd1c2UnKVswXS5zZXRBdHRyaWJ1dGUoJ3hsaW5rOmhyZWYnLCAnIycgKyB0eXBlKTsNCiAgICAgICAgb2JqLnRvZ3R5cGUgPSB0eXBlOw0KICAgICAgICBjaGVja0lEID0gb2JqOw0KDQogICAgICAgIHV0ZChvYmosIGlkLCBkaXNwbGF5KTsNCiAgICAgICAgZXh0cmFSZWxhRmluKCk7DQogICAgfQ0KfQ0KZnVuY3Rpb24gdXRkKG9iaiwgaWQsIHNob3csIG9jKSB7DQoNCiAgICB2YXIgcHNob3cgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChpZCkuc3R5bGUuZGlzcGxheSAhPT0gJ25vbmUnID8gJ2Jsb2NrJyA6ICdub25lJzsNCiAgICBpZiAob2JqLnJlbGFmcm9tKSB7DQogICAgICAgIGlmIChvYmoucmVsYWZyb20uZGlzcGxheSAhPT0gcHNob3cpIHsNCiAgICAgICAgICAgIHZhciByZWxhZnJvbXMgPSBPYmplY3Qua2V5cyhvYmoucmVsYWZyb20pOw0KICAgICAgICAgICAgcmVsYWZyb21zLnNwbGljZShyZWxhZnJvbXMuaW5kZXhPZignZGlzcGxheScpLCAxKTsNCiAgICAgICAgICAgIGZvciAodmFyIGsgPSAwOyBrIDwgcmVsYWZyb21zLmxlbmd0aDsgaysrKSB7DQogICAgICAgICAgICAgICAgdmFyIGQgPSByZWxhZnJvbXNba107DQogICAgICAgICAgICAgICAgZXh0cmFSZWxhW2RdLmlzQyA9IHRydWU7DQogICAgICAgICAgICB9DQogICAgICAgICAgICBvYmoucmVsYWZyb20uZGlzcGxheSA9IHBzaG93Ow0KICAgICAgICB9DQogICAgfQ0KICAgIGlmIChvYmoucmVsYXRvKSB7DQogICAgICAgIGlmIChvYmoucmVsYXRvLmRpc3BsYXkgIT09IHBzaG93KSB7DQogICAgICAgICAgICB2YXIgcmVsYXRvcyA9IE9iamVjdC5rZXlzKG9iai5yZWxhdG8pOw0KICAgICAgICAgICAgcmVsYXRvcy5zcGxpY2UocmVsYXRvcy5pbmRleE9mKCdkaXNwbGF5JyksIDEpOw0KICAgICAgICAgICAgZm9yICh2YXIgayA9IDA7IGsgPCByZWxhdG9zLmxlbmd0aDsgaysrKSB7DQogICAgICAgICAgICAgICAgdmFyIGQgPSByZWxhdG9zW2tdOw0KICAgICAgICAgICAgICAgIGV4dHJhUmVsYVtkXS5pc0MgPSB0cnVlOw0KICAgICAgICAgICAgfQ0KICAgICAgICAgICAgb2JqLnJlbGF0by5kaXNwbGF5ID0gcHNob3c7DQogICAgICAgIH0NCiAgICB9DQogICAgaWYgKG9iai5jYWxsKSB7DQogICAgICAgIHZhciBjYWxscyA9IE9iamVjdC5rZXlzKG9iai5jYWxsKTsNCiAgICAgICAgaWYgKGNoZWNrSUQgIT09IG9iaikgew0KICAgICAgICAgICAgZm9yICh2YXIgaSA9IDA7IGkgPCBjYWxscy5sZW5ndGg7IGkrKykgew0KICAgICAgICAgICAgICAgIHZhciBhID0gY2FsbHNbaV0uc2xpY2UoMSk7DQogICAgICAgICAgICAgICAgdmFyIGIgPSBvYmouY2FsbFtjYWxsc1tpXV07DQogICAgICAgICAgICAgICAgdmFyIGMgPSBiLnRvZ3R5cGU7DQogICAgICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoYSkuc3R5bGUuZGlzcGxheSA9IHNob3c7DQogICAgICAgICAgICAgICAgaWYgKGIucmVsYWZyb20gJiYgIWMpIHsNCiAgICAgICAgICAgICAgICAgICAgaWYgKGIucmVsYWZyb20uZGlzcGxheSAhPT0gc2hvdykgew0KICAgICAgICAgICAgICAgICAgICAgICAgdmFyIHJlbGFmcm9tcyA9IE9iamVjdC5rZXlzKGIucmVsYWZyb20pOw0KICAgICAgICAgICAgICAgICAgICAgICAgcmVsYWZyb21zLnNwbGljZShyZWxhZnJvbXMuaW5kZXhPZignZGlzcGxheScpLCAxKTsNCiAgICAgICAgICAgICAgICAgICAgICAgIGZvciAodmFyIGsgPSAwOyBrIDwgcmVsYWZyb21zLmxlbmd0aDsgaysrKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFyIGQgPSByZWxhZnJvbXNba107DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZXh0cmFSZWxhW2RdLmlzQyA9IHRydWU7DQogICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICBiLnJlbGFmcm9tLmRpc3BsYXkgPSBzaG93Ow0KICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgIGlmIChiLnJlbGF0byAmJiAhYykgew0KICAgICAgICAgICAgICAgICAgICBpZiAoYi5yZWxhdG8uZGlzcGxheSAhPT0gc2hvdykgew0KICAgICAgICAgICAgICAgICAgICAgICAgdmFyIHJlbGF0b3MgPSBPYmplY3Qua2V5cyhiLnJlbGF0byk7DQogICAgICAgICAgICAgICAgICAgICAgICByZWxhdG9zLnNwbGljZShyZWxhdG9zLmluZGV4T2YoJ2Rpc3BsYXknKSwgMSk7DQogICAgICAgICAgICAgICAgICAgICAgICBmb3IgKHZhciBrID0gMDsgayA8IHJlbGF0b3MubGVuZ3RoOyBrKyspIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YXIgZCA9IHJlbGF0b3Nba107DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgZXh0cmFSZWxhW2RdLmlzQyA9IHRydWU7DQogICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICBiLnJlbGF0by5kaXNwbGF5ID0gc2hvdzsNCiAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICBpZiAoYykgew0KICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCJnW2VkXFw6dG9ndG9waWNpZD0nIiArIGEgKyAiJ10iKS5zdHlsZS5kaXNwbGF5ID0gc2hvdzsNCiAgICAgICAgICAgICAgICAgICAgaWYgKGMgPT09ICdtaW51cycpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIHV0ZChiLCBhLCBzaG93KQ0KICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgIGlmICgoYi5jYWxsIHx8IGIuYm91bmRhcnkgfHwgYi5zdW1tYXJ5KSAmJiBjID09PSAncGx1cycpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIHV0ZChiLCBhLCBzaG93LCB0cnVlKQ0KICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgIGlmIChiLmNhbGwgJiYgIWMpIHsNCiAgICAgICAgICAgICAgICAgICAgdXRkKGIsIGEsIHNob3csIHRydWUpDQogICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgIGlmIChiLnN1bW1hcnkgJiYgIWMpIHsNCiAgICAgICAgICAgICAgICAgICAgdXRkKGIsIGEsIHNob3cpDQogICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgIGlmIChiLmJvdW5kYXJ5ICYmICFjKSB7DQogICAgICAgICAgICAgICAgICAgIHV0ZChiLCBhLCBzaG93KQ0KICAgICAgICAgICAgICAgIH0NCg0KICAgICAgICAgICAgfQ0KICAgICAgICB9DQogICAgfQ0KICAgIGlmIChvYmouc3VtbWFyeSkgew0KICAgICAgICB2YXIgc3VtbWFyeXMgPSBPYmplY3Qua2V5cyhvYmouc3VtbWFyeSk7DQogICAgICAgIGlmICgoY2hlY2tJRCAhPT0gb2JqICYmIChvYmoudG9ndHlwZSA9PT0gJ21pbnVzJyB8fCAhb2JqLnRvZ3R5cGUpKSB8fCBjaGVja0lEID09PSBvYmopIHsNCiAgICAgICAgICAgIGZvciAodmFyIGkgPSAwOyBpIDwgc3VtbWFyeXMubGVuZ3RoOyBpKyspIHsNCiAgICAgICAgICAgICAgICB2YXIgYSA9IHN1bW1hcnlzW2ldLnNsaWNlKDEpOw0KICAgICAgICAgICAgICAgIHZhciBvc3AgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChhKS5nZXRBdHRyaWJ1dGUoJ2VkOnBhcmVudGlkJyk7DQogICAgICAgICAgICAgICAgaWYgKG9zcC5tYXRjaCgvXCwvKSkgew0KICAgICAgICAgICAgICAgICAgICB2YXIgb3NwYSA9IG9zcC5zcGxpdCgnLCcpOw0KICAgICAgICAgICAgICAgICAgICB2YXIgb3NwTCA9IDA7DQoNCiAgICAgICAgICAgICAgICAgICAgZm9yICh2YXIgaiA9IDA7IGogPCBvc3BhLmxlbmd0aDsgaisrKSB7DQogICAgICAgICAgICAgICAgICAgICAgICBpZiAoc2hvdyA9PSAnbm9uZScpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICBpZiAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQob3NwYVtqXSkuc3R5bGUuZGlzcGxheSAhPSAnbm9uZScpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYnJlYWs7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgb3NwTCsrOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgaWYgKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGEpLnN0eWxlLmRpc3BsYXkgIT0gJ25vbmUnKSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGJyZWFrOw0KICAgICAgICAgICAgICAgICAgICAgICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG9zcEwrKzsNCiAgICAgICAgICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgICAgICAgICB9DQoNCiAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICBpZiAob3NwTCAhPT0gb3NwYS5sZW5ndGgpIHsNCiAgICAgICAgICAgICAgICAgICAgICAgIGNvbnRpbnVlOw0KICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgIHZhciBiID0gb2JqLnN1bW1hcnlbc3VtbWFyeXNbaV1dOw0KICAgICAgICAgICAgICAgIC8vIGNvbnNvbGUubG9nKGEpOw0KICAgICAgICAgICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGEpLnN0eWxlLmRpc3BsYXkgPSBzaG93Ow0KICAgICAgICAgICAgICAgIC8vICAgICAgICAgICAgICAgIGlmKGMpew0KICAgICAgICAgICAgICAgIC8vICAgICAgICAgICAgICAgICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCJnW2VkXFw6dG9ndG9waWNpZD0nIithKyInXSIpLnN0eWxlLmRpc3BsYXk9c2hvdzsNCiAgICAgICAgICAgICAgICAvLyAgICAgICAgICAgICAgICAgICAgaWYoYz09PSdtaW51cycpew0KICAgICAgICAgICAgICAgIC8vICAgICAgICAgICAgICAgICAgICAgICAgdXRkKGIsc2hvdykNCiAgICAgICAgICAgICAgICAvLyAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgIC8vICAgICAgICAgICAgICAgICAgICBpZiAoYi5jYWxsJiZjPT09J3BsdXMnKSB7DQogICAgICAgICAgICAgICAgLy8gICAgICAgICAgICAgICAgICAgICAgICB1dGQoYixzaG93LHRydWUpDQogICAgICAgICAgICAgICAgLy8gICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAvLyAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgLy8gICAgICAgICAgICAgICAgaWYoYi5jYWxsJiYhYykgew0KICAgICAgICAgICAgICAgIC8vICAgICAgICAgICAgICAgICAgICB1dGQoYixzaG93LHRydWUpDQogICAgICAgICAgICAgICAgLy8gICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgIGlmIChPYmplY3Qua2V5cyhiKS5sZW5ndGggIT09IDApIHsNCiAgICAgICAgICAgICAgICAgICAgdXRkKGIsIGEsIHNob3cpDQogICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgfQ0KICAgICAgICB9DQogICAgfQ0KICAgIGlmIChvYmouYm91bmRhcnkpIHsNCiAgICAgICAgdmFyIGJvdW5kYXJ5cyA9IE9iamVjdC5rZXlzKG9iai5ib3VuZGFyeSk7DQogICAgICAgIGlmIChjaGVja0lEICE9PSBvYmopIHsNCiAgICAgICAgICAgIGZvciAodmFyIGkgPSAwOyBpIDwgYm91bmRhcnlzLmxlbmd0aDsgaSsrKSB7DQogICAgICAgICAgICAgICAgdmFyIGEgPSBib3VuZGFyeXNbaV0uc2xpY2UoMSk7DQogICAgICAgICAgICAgICAgdmFyIGIgPSBvYmouYm91bmRhcnlbYm91bmRhcnlzW2ldXTsNCiAgICAgICAgICAgICAgICAvLyBjb25zb2xlLmxvZyhhKTsNCiAgICAgICAgICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZChhKS5zdHlsZS5kaXNwbGF5ID0gc2hvdzsNCiAgICAgICAgICAgICAgICAvLyAgICAgICAgICAgICAgICBpZihjKXsNCiAgICAgICAgICAgICAgICAvLyAgICAgICAgICAgICAgICAgICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvcigiZ1tlZFxcOnRvZ3RvcGljaWQ9JyIrYSsiJ10iKS5zdHlsZS5kaXNwbGF5PXNob3c7DQogICAgICAgICAgICAgICAgLy8gICAgICAgICAgICAgICAgICAgIGlmKGM9PT0nbWludXMnKXsNCiAgICAgICAgICAgICAgICAvLyAgICAgICAgICAgICAgICAgICAgICAgIHV0ZChiLHNob3cpDQogICAgICAgICAgICAgICAgLy8gICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAvLyAgICAgICAgICAgICAgICAgICAgaWYgKGIuY2FsbCYmYz09PSdwbHVzJykgew0KICAgICAgICAgICAgICAgIC8vICAgICAgICAgICAgICAgICAgICAgICAgdXRkKGIsc2hvdyx0cnVlKQ0KICAgICAgICAgICAgICAgIC8vICAgICAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgLy8gICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgIC8vICAgICAgICAgICAgICAgIGlmKGIuY2FsbCYmIWMpIHsNCiAgICAgICAgICAgICAgICAvLyAgICAgICAgICAgICAgICAgICAgdXRkKGIsc2hvdyx0cnVlKQ0KICAgICAgICAgICAgICAgIC8vICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICBpZiAoT2JqZWN0LmtleXMoYikubGVuZ3RoICE9PSAwKSB7DQogICAgICAgICAgICAgICAgICAgIHV0ZChiLCBhLCBzaG93KQ0KICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgIH0NCiAgICAgICAgfQ0KICAgIH0NCiAgICBpZiAoIW9jICYmIG9iai5jaGlsZCkgew0KICAgICAgICB2YXIgY2hpbGRzID0gT2JqZWN0LmtleXMob2JqLmNoaWxkKTsNCiAgICAgICAgZm9yICh2YXIgaSA9IDA7IGkgPCBjaGlsZHMubGVuZ3RoOyBpKyspIHsNCiAgICAgICAgICAgIHZhciBhID0gY2hpbGRzW2ldLnNsaWNlKDEpOw0KICAgICAgICAgICAgdmFyIGIgPSBvYmouY2hpbGRbY2hpbGRzW2ldXTsNCiAgICAgICAgICAgIHZhciBjID0gYi50b2d0eXBlOw0KICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoYSkuc3R5bGUuZGlzcGxheSA9IHNob3c7DQogICAgICAgICAgICB2YXIgdFNQYXRoID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcigicGF0aFtlZFxcOnRvc3VwZXJpZD0nIiArIGEgKyAiJ10iKTsNCiAgICAgICAgICAgIGlmICh0U1BhdGgpIHsNCiAgICAgICAgICAgICAgICB0U1BhdGguc3R5bGUuZGlzcGxheSA9IHNob3c7DQogICAgICAgICAgICB9DQogICAgICAgICAgICB2YXIgbm90ZVRpcCA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoImdbZWRcXDpub3RldG89JyIgKyBhICsgIiddIik7DQogICAgICAgICAgICBpZiAobm90ZVRpcCkgew0KICAgICAgICAgICAgICAgIG5vdGVUaXAuc3R5bGUuZGlzcGxheSA9IHNob3c7DQogICAgICAgICAgICB9DQogICAgICAgICAgICBpZiAoYi5yZWxhZnJvbSAmJiAhYykgew0KICAgICAgICAgICAgICAgIGlmIChiLnJlbGFmcm9tLmRpc3BsYXkgIT09IHNob3cpIHsNCiAgICAgICAgICAgICAgICAgICAgdmFyIHJlbGFmcm9tcyA9IE9iamVjdC5rZXlzKGIucmVsYWZyb20pOw0KICAgICAgICAgICAgICAgICAgICByZWxhZnJvbXMuc3BsaWNlKHJlbGFmcm9tcy5pbmRleE9mKCdkaXNwbGF5JyksIDEpOw0KICAgICAgICAgICAgICAgICAgICBmb3IgKHZhciBrID0gMDsgayA8IHJlbGFmcm9tcy5sZW5ndGg7IGsrKykgew0KICAgICAgICAgICAgICAgICAgICAgICAgdmFyIGQgPSByZWxhZnJvbXNba107DQogICAgICAgICAgICAgICAgICAgICAgICBleHRyYVJlbGFbZF0uaXNDID0gdHJ1ZTsNCiAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgICAgICBiLnJlbGFmcm9tLmRpc3BsYXkgPSBzaG93Ow0KICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgIH0NCiAgICAgICAgICAgIGlmIChiLnJlbGF0byAmJiAhYykgew0KICAgICAgICAgICAgICAgIGlmIChiLnJlbGF0by5kaXNwbGF5ICE9PSBzaG93KSB7DQogICAgICAgICAgICAgICAgICAgIHZhciByZWxhdG9zID0gT2JqZWN0LmtleXMoYi5yZWxhdG8pOw0KICAgICAgICAgICAgICAgICAgICByZWxhdG9zLnNwbGljZShyZWxhdG9zLmluZGV4T2YoJ2Rpc3BsYXknKSwgMSk7DQogICAgICAgICAgICAgICAgICAgIGZvciAodmFyIGsgPSAwOyBrIDwgcmVsYXRvcy5sZW5ndGg7IGsrKykgew0KICAgICAgICAgICAgICAgICAgICAgICAgdmFyIGQgPSByZWxhdG9zW2tdOw0KICAgICAgICAgICAgICAgICAgICAgICAgZXh0cmFSZWxhW2RdLmlzQyA9IHRydWU7DQogICAgICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICAgICAgYi5yZWxhdG8uZGlzcGxheSA9IHNob3c7DQogICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgfQ0KICAgICAgICAgICAgaWYgKGMpIHsNCiAgICAgICAgICAgICAgICBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCJnW2VkXFw6dG9ndG9waWNpZD0nIiArIGEgKyAiJ10iKS5zdHlsZS5kaXNwbGF5ID0gc2hvdzsNCiAgICAgICAgICAgICAgICBpZiAoYyA9PT0gJ21pbnVzJykgew0KICAgICAgICAgICAgICAgICAgICB1dGQoYiwgYSwgc2hvdykNCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICAgICAgaWYgKChiLmNhbGwgfHwgYi5ib3VuZGFyeSB8fCBiLnN1bW1hcnkpICYmIGMgPT09ICdwbHVzJykgew0KICAgICAgICAgICAgICAgICAgICB1dGQoYiwgYSwgc2hvdywgdHJ1ZSkNCiAgICAgICAgICAgICAgICB9DQogICAgICAgICAgICB9DQogICAgICAgICAgICBpZiAoYi5jYWxsICYmICFjKSB7DQogICAgICAgICAgICAgICAgdXRkKGIsIGEsIHNob3csIHRydWUpDQogICAgICAgICAgICB9DQogICAgICAgICAgICBpZiAoYi5zdW1tYXJ5ICYmICFjKSB7DQogICAgICAgICAgICAgICAgdXRkKGIsIGEsIHNob3cpDQogICAgICAgICAgICB9DQogICAgICAgICAgICBpZiAoYi5ib3VuZGFyeSAmJiAhYykgew0KICAgICAgICAgICAgICAgIHV0ZChiLCBhLCBzaG93KQ0KICAgICAgICAgICAgfQ0KICAgICAgICB9DQogICAgfQ0KfQ0KDQpmdW5jdGlvbiBleHRyYVJlbGFGaW4oKSB7DQogICAgdmFyIGV4dHJha2V5cyA9IE9iamVjdC5rZXlzKGV4dHJhUmVsYSk7DQogICAgZm9yICh2YXIgaSA9IDA7IGkgPCBleHRyYWtleXMubGVuZ3RoOyBpKyspIHsNCiAgICAgICAgdmFyIGV4dHJhT2JqID0gZXh0cmFSZWxhW2V4dHJha2V5c1tpXV07DQogICAgICAgIGlmIChleHRyYU9iai5pc0MgPT09IHRydWUpIHsNCiAgICAgICAgICAgIHZhciBmc2hvdyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGV4dHJhT2JqLmZyb21pZCkuc3R5bGUuZGlzcGxheSAhPT0gJ25vbmUnID8gdHJ1ZSA6IGZhbHNlOw0KICAgICAgICAgICAgdmFyIHRzaG93ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoZXh0cmFPYmoudG9pZCkuc3R5bGUuZGlzcGxheSAhPT0gJ25vbmUnID8gdHJ1ZSA6IGZhbHNlOw0KICAgICAgICAgICAgZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoZXh0cmFPYmouaWQpLnN0eWxlLmRpc3BsYXkgPSBmc2hvdyAmJiB0c2hvdyA/ICdibG9jaycgOiAnbm9uZSc7DQogICAgICAgICAgICBleHRyYVJlbGFbZXh0cmFrZXlzW2ldXS5pc0MgPSBmYWxzZTsNCiAgICAgICAgfQ0KICAgIH0NCn0='))</script>
  </body>
</html>
